スタイルを適用する条件を指定する

CSS - @media

メディアクエリとは

メディアクエリーは、横幅・高さ・色などのメディア特性を用いてスタイルを適用する条件を指定する際に使用します。

・外部リンクを指定する場合
<link rel="stylesheet" media="screen" href="example.css" />

・スタイルシート内に指定する場合
@media screen and (min-width: 320px) {
  /* 画面幅が320pxを超えた表示の際に適用される */
}

メディアクエリの記述方法

用意されているメディアタイプを指定します。または、用意されているメディア特性を組み合わせることもできます。

@media 適用させたいメディアタイプ and(not) メディア特性  {
 /* css記述箇所 */
}

メディアタイプについて

この値を指定することによって、適用されるメディアを限定することができます。CSSの仕様作成の段階で、追加されたタイプが Media Queries 4 で非推奨となったものもあるので、ここでは指定可能なタイプのみ紹介します。

値	説明
all	全てのデバイスに適用されます
print	印刷されたものや印刷プレビューに適用されます
screen	主にカラーのコンピューター画面などに適用されます
speech(aural)	音声出力向けに適用されます

Webサイトのレイアウト用に適用したい場合の例

おそらく、外部スタイルシートを<link>要素で読み込む方法が一般的だと思いますので、この要素に以下のように指定すると良いでしょう。

<link rel="stylesheet" media="screen" href="example.css" />

こちらのように、カンマで区切ることで複数指定することも可能です。

<link rel="stylesheet" media="screen, print" href="example.css" />

メディア特性について

また用意されているキーワードと数値を組み合わせて、もっと複雑な指定をすることもできます。例えばレスポンシブデザインのサイトを作成する際などに使用されますが、閲覧している端末の幅が一定を超えたら適用される、のように一定の条件をつけてCSSを切り分けることができるのです。

パソコンとタブレット端末とスマートフォンでの切り分け例

閲覧する端末の幅（width）をみて、CSSを切り分けた例です。

/* 全デバイスに適用させるスタイルこここに書く */
p { color: #000; }

@media (max-width:320px) { 
	/*　画面サイズ320pxまでに適用させたいスタイル　*/
}
@media (min-width:480px) { 
	/*　画面サイズ480px以上に適用させたいスタイル　*/
}
@media (min-width:768px) and ( max-width:1024px) {
	/*　画面サイズ768pxから1024pxまでに適用させたいスタイル　*/
}
@media (min-width:1024px) {
	/*　画面サイズ1024px以上に適用させたいスタイル　*/
}

指定できる特性の一覧

以下で指定できる特性は、おおよそ最大値（max-）と最小値(min-)を指定することができます。

特性	min-/max-の可否	説明
color	○	出力デバイスの色深度を指定します。カラー以外だった場合は0になる。
color-index	○	カラー参照テーブルの項目数。整数を指定します
aspect-ratio	○	閲覧するデバイスの高さと横幅の比率
device-aspect-ratio	○	device-height に対する device-width の比率
device-height	○	デバイスの縦幅。描画領域ではなく、スクリーンや全体の縦幅を指します
device-width	○	デバイスの横幅。描画領域ではなく、スクリーンや全体の横幅を指します
grid	-	TTY や電話ディスプレイなどの固定文字幅。グリッド端末であれば 1、それ以外は 0になる
height	○	表示の高さ
width	○	表示の横幅
monochrome	○	白黒デバイスの1ピクセルあたりのビット数。カラー端末の場合は 0になる
orientation	-	viewport が横向きか縦向きかを指定。値はlandscapeかportrait
resolution	○	解像度（画素密度）を指定。単位はdpiでもdppxでも可
scan	-	テレビにおける走査方式を指定。値はprogressiveかinterlace

その他の切り分け例

以上の特性を利用してさらにいくつかの例を挙げます。

@media (orientation: portrait) { 
  /* 画面が縦長の場合の適用させるスタイル */
}

@media (color) {
  /* カラー端末の場合に適用させるスタイル */
}

@media (monochrome) {
  /* モノクロ端末の場合に適用させるスタイル */
}
@media (min-resolution: 300dpi) {
  /* 解像度が 300dpi 以上の場合に適用させるスタイル */
}

論理演算子について

メディアタイプやメディア特性を以下のような論理演算子を使って連結して書くことができます。これによって、複数の条件を定義することができるのです。

値	説明
and	複数のメディア特性や、メディアタイプを連結します。その条件が当てはまる場合に適用される
,(カンマ)	複数のメディア特性や、メディアタイプを複数定義します。その条件のいづれかがマッチした場合適用されます
not	その条件がマッチしない場合適用されます
only	メディアクエリーに対応していない古いブラウザに対して、特定のスタイルを適用させないようにすることができます

上記の「パソコンとタブレット端末とスマートフォンでの切り分け例」で紹介した例に対して、論理演算子を用いてメディアタイプとメディア特性を｢and｣で連結してみます。

/* 全デバイスに適用させるスタイルこここに書く */
p { color: #000; }

@media only screen and (max-width:320px) { 
	/*　メディアタイプscreenかつ画面サイズ320pxまでに適用させたいスタイル　*/
}
@media only screen and (min-width:480px) { 
	/*　メディアタイプscreenかつ画面サイズ480px以上に適用させたいスタイル　*/
}
@media only screen and (min-width:768px) and ( max-width:1024px) {
	/*　メディアタイプscreenかつ画面サイズ768pxから1024pxまでに適用させたいスタイル　*/
}
@media only screen and (min-width:1024px) {
	/*　メディアタイプscreenかつ画面サイズ1024px以上に適用させたいスタイル　*/
}

また頭に｢only｣と指定することで、メディアタイプに対応指定ないブラウザには適用されないようになります。

使用例

よくある例で、解像度の高いRetinaディスプレイに適用させたい場合があります。その場合はデバイスのピクセル比を参照して切り分けを行います。Retinaディスプレイは2、通常のディスプレイは1となります。

@media screen and (-webkit-min-device-pixel-ratio:2){
  /* Retinaディスプレイ用のスタイルを書く */
}