• このエントリーをはてなブックマークに追加

メディア(媒体)のタイプ

媒体のタイプを指定します。基本的に指定せず、allということで、全ての媒体で同じようにCSSが適用されるようになっています。

スクリーンはよく触れますが、プリンタなどは印刷の指定まで考えていないとなかなか考えませんよね。印刷は簡素にし、印刷用紙にうまくはまるように指定するとより良いです。
テレビ画面は大きいですが、それに合わせた指定も可能です。

  • @media all
    • すべての媒体
  • @media screen
    • コンピュータ画面
  • @media print
    • 印刷物
  • @media tv
    • テレビ

メディアの幅指定

媒体の幅に合わせてCSSをそれぞれ指定。

pxをよく見かける。レスポンシブWebデザインにおいてはブレイクポイントとして指定する。

様々な単位に対応しているので、10emといった指定も可能ではある。

デバイス幅を基準にしたメディアクエリ

CSSのデバイス幅でCSSの切り替えを行う。

CSSで分岐する

0px~499pxまではbodyの背景を赤色にする。500px~999pxまでは黄色にする。それ以外はデフォルト(白)になるサンプルコードスニペット。

CSSファイル内の記述や、<style>タグ内のCSSの記述で分岐する。

@media screen and (min-width: 0) and (max-width: 499px){
	body{
		background: rgba(255,0,0,1);
	}
}
@media screen and (min-width: 500px) and (max-width: 999px){
	body{
		background: rgba(255,255,0,1);
	}
}

bodyの背景色の変化とともに、文字の大きさを変化させる幅によるメディアクエリのサンプルコードスニペット。これは、0px~499pxまでは、文字サイズが指定されたとおりに変化するが、それより大きい幅は基本の文字サイズを継承する。背景色はそれぞれ3種類変化する。

このようにデフォルト・ベースとなるスタイルを基準にして記述することでCSSを効率的に、同じ記述・同じ設定地を元にして上書きなどが行える。

ただ、これには少し問題がある。短い記述・単純な記述のCSSならばこちらのほうが効率が良いが、分担で作業を行う場合は、ファイルを目的ごとに分けたり、モジュールごとに記述を分けて保存しておいたほうが効率的。一つのファイル・一つの場所に集約されていると、分担ができない。そのため、ファイルや記述する場所を分けておくといった工夫が必要。

body{
	font-size: 2em;
	background: rgba(0,0,255,1);
}
@media screen and (min-width: 0) and (max-width: 499px){
	body{
		font-size: 1em;
		background: rgba(255,0,0,1);
	}
}
@media screen and (min-width: 500px) and (max-width: 999px){
	body{
		background: rgba(255,255,0,1);
	}
}

レスポンシブWebデザイン

メディアタイプなどがあるが、こちらは幅を基準としてCSSを適用する。レスポンシブWebデザインにおいてはこの幅を元にスタイルが変化するメディアクエリは欠かせない。

レスポンシブWebデザインという考え方、そのコーディング方法の一例

Erik LucateroによるPixabayからの画像