メディアクエリ

CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。

構文

メディアクエリは、メディアタイプと、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、さらにメディアクエリのすべての式が true のとき、true になります。

論理演算子

論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、not および and, only があります。

また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。

not キーワードは、クエリの結果を否定します。例えば、"all and (not color)" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。

only キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

擬似 BNF (この表記を好む方のために)

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。

注記: 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。

メディア特性

ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "<" および ">" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。

注記: メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。

color

値: <color>
メディア: visual
min/max 前置詞の使用: 可

出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。

注記: カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。

例

すべてのカラー表示可能なデバイスにスタイルシートを適用するには:

@media all and (color) { ... }

カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:

@media all and (min-color: 4) { ... }

color-index

値: 整数
メディア: visual
min/max 前置詞の使用: 可

出力デバイスのカラー検索テーブルのエントリ数を指示します。

例

インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:

@media all and (color-index) { ... }

最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="https://foo.bar.com/stylesheet.css" />

aspect-ratio

値: 整数 / 整数
メディア: visual, tactile
min/max 前置詞の使用: 可

出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

例

以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。

@media screen and (min-aspect-ratio: 1/1) { ... }

これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。

device-aspect-ratio

値: 整数 / 整数
メディア: visual, tactile
min/max 前置詞の使用: 可

出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

例

以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。

device-height

値: <length>
メディア: visual, tactile
min/max 前置詞の使用: 可

出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

例

幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

device-width

値: <length>
メディア: visual, tactile
min/max 前置詞の使用: 可

出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

grid

値: 整数
メディア: all
min/max 前置詞の使用: 不可

出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。

注記: Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。

例

ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:

@media handheld and (grid) and (max-width: 15em) { ... }

注記: "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。

height

値: <length>
メディア: visual, tactile
min/max 前置詞の使用: 可

height メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。

注記: ユーザがウィンドウの大きさを変更すると、width や height メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。

monochrome

値: 整数
メディア: visual
min/max 前置詞の使用: 可

モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。

例

すべてのモノクロデバイスにスタイルシートを適用するには:

@media all and (monochrome) { ... }

ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:

@media all and (min-monochrome: 8) { ... }

orientation

値: landscape | portrait
メディア: visual
min/max 前置詞の使用: 不可

デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。

例

縦置き方向のときにだけスタイルシートを適用するには:

@media all and (orientation: portrait) { ... }

resolution

値: <resolution>
メディア: bitmap
min/max 前置詞の使用: 可

出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。

例

解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:

@media print and (min-resolution: 300dpi) { ... }

scan

値: progressive | interlace
メディア: tv
min/max 前置詞の使用: 不可

テレビ出力デバイスの走査方式を記述します。

注記: Gecko (および Firefox) は現在 tv メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。

例

プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:

@media tv and (scan: progressive) { ... }

width

値: <length>
メディア: visual, tactile
min/max 前置詞の使用: 可

width メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。

例

幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="https://foo.com/mystyle.css" />

次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:

@media screen and (min-width: 500px) and (max-width: 800px) { ... }