メディアクエリの利用

メディアクエリ は、メディアタイプならびに、横幅・高さ・色などのメディア特性を用いてスタイルシートの適用範囲を制御する式（一つ以上）から構成されます。CSS3 で追加されたメディアクエリを用いると、コンテンツを各デバイスの出力幅に合わせて表示することができ、コンテンツそのものを個別に調整する必要がなくなります。

構文

メディアクエリはメディアタイプから構成されますが、CSS3 の仕様ではメディア特性を用いた式を一つ以上含めることもできます。なお、その式の評価結果は真偽値です。メディアクエリで示されたメディアタイプが表示先のドキュメントの種類に一致し、かつ、メディアクエリに含まれるすべての式が真であるとき、クエリの結果は真となります。

<!-- link 要素における CSS メディアクエリ -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- スタイルシート内における CSS メディアクエリ -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

メディアクエリが真である場合、対応するスタイルシートまたはスタイルルールが適用され、スタイルは通常通りカスケードされます。<link> タグ内のメディアクエリに対応するスタイルシートは、たとえクエリの評価結果が偽であったとしてもダウンロードされます（それでも適用はされません）。

not 演算子や only 演算子のどちらも使用されていなければメディアタイプは省略可能であり、その場合にはメディアタイプ all が指定されているものと解釈されます。

論理演算子

not や and、only といった論理演算子を用いて、複雑なメディアクエリを組み立てることができます。 and 演算子は複数のメディア特性を連結して 1 つのメディアクエリとするのに用いられ、連結された各メディア特性がすべて真を返せば、クエリ全体の評価結果が真となります。not 演算子はメディアクエリ全体を否定するのに用いられます。only 演算子はメディアクエリ全体が一致した場合のみスタイルを適用させるのに用いられ、指定したスタイルは古いブラウザに適用させたくないときに便利です。not 演算子や only 演算子を用いる際は、メディアタイプを 必ず 指定する必要があります。

さらに、複数のメディアクエリをカンマ区切りで連結させることもできます。その場合、いずれかのメディアクエリが真を返せばクエリ全体が真となります。つまり or 演算子を使用した場合と同じ結果となります。

and

and 演算子は複数のメディア特性を互いに連結したり、メディア特性とメディアタイプを連結したりするのに用いられます。基本的なメディアクエリ（メディアタイプが all と推定されるメディア特性）は次のようになります。

@media (min-width: 700px) { ... }

ディスプレイが横向きである場合のみにスタイルを適用させたい場合には、and 演算子を用いてメディア特性を連結することができます。

@media (min-width: 700px) and (orientation: landscape) { ... }

このメディアクエリは、viewport の幅が 700px 以上で、かつディスプレイが横向きであれば真となります。さらに、ディスプレイのメディアタイプはテレビという条件も加えたい場合は、このメディアタイプと上記のメディア特性を and 演算子で連結できます。

@media tv and (min-width: 700px) and (orientation: landscape) { ...  }

このメディアクエリは、メディアタイプがテレビで、かつ viewport の幅が 700px 以上で、かつディスプレイが横向きであれば真となります。

カンマ区切りリスト

メディアクエリに含まれたカンマ区切りのリストは or 演算子と同じような働きをします。カンマ区切りのリストを用いた場合、いずれか 1 つのメディアクエリが真であればスタイル（シート）が適用されます。リスト内の各メディアクエリは独立したクエリとして扱われ、あるメディアクエリに対する演算子は他のクエリに影響を与えません。すなわち、カンマ区切りのメディアクエリを用いると、異なるメディア特性、メディアタイプ、そしてメディアの状態に対して同じスタイルを適用させることができます

例として、横幅が 700px 以上のデバイス、または横向きのモバイル端末の両方にスタイルを適用したい場合、メディアクエリは次のように書くことができます。

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

例としてデバイスの viewport が 800px の横幅だった場合、メディアクエリの前半は  @media all and (min-width: 700px) と解釈されるため、メディアタイプが  handheld でなかったために後半の条件を満たさなくとも、このクエリ全体は真となります。同様に、デバイスが横幅 500px のモバイル端末で横向きだった場合、前半のクエリは偽となりますが後半の条件は満たしているため、クエリ全体としては真になります。

not

あるメディアクエリの評価結果が偽であるとき （カラーディスプレイに対する monochrome や、 min-width: 700px のメディア特性に対する 600px 幅のスクリーンなど） 、そのクエリ全体に not 演算子を適用した結果は真となります。カンマ区切りのメディアクエリに not 演算子を適用した場合、それぞれのクエリが否定されるのではなく、一連のメディアクエリ全体に否定が適用されます。また、not 演算子は個別のメディア特性を否定することはできず、常にメディアクエリ全体に対して用いられます。例えば、以下のクエリにおける not 演算子は最後に評価されます。

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

このクエリは次のように評価されます。

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

次のように評価されることはありません。

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

もう 1 つの例として、次のメディアクエリを考えてみます。

@media not screen and (color), print and (color)

このクエリは次のように評価されます。

@media (not (screen and (color))), print and (color)

only

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

メディアクエリにおいては大文字・小文字の区別がされます。不明なメディアタイプが指定されたメディアクエリは常に偽と評価されます。 

メディア特性

ほとんどのメディア特性は、「以上」や「以下」といった条件を付けるために "min-" や "max-" という接頭辞を付けることができます。こうすると "<" や ">" といった記号を使用する必要がなくなり、HTML や XML における記号と衝突するのを避けることができます。メディア特性に値が指定されていなかった場合、実際の値が非ゼロであれば式は真と評価されます。

color

値: <color>
メディア: media/visual
min/max 接頭辞の付加可否: 可

出力デバイスの色深度（bits per color component）を指定します。カラー表示のデバイスでなければ、この値はゼロとなります。

表記例

すべてのカラー表示デバイスにスタイルシートを適用する場合

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

色深度が 4 ビット以上のデバイスにスタイルシートを適用する場合

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

color-index

値: <integer>
メディア: media/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

値: <ratio>
メディア: media/visual, media/tactile
min/max 接頭辞の付加可否: 可

出力デバイスにおける表示部分のアスペクト比を指定します。この値はスラッシュ（"/"）で区切られた 2 つの正整数で指定され、水平方向 / 垂直方向のようにピクセル数の比を表します。

表記例

縦幅以上の横幅を持つディスプレイにスタイルシートを適用する場合

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

このクエリにより、アスペクト比が 1:1 以上、つまり表示部分が正方形または横向きであればスタイルシートが適用されます。

device-aspect-ratio

値: <ratio>
メディア: media/visual, media/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>
メディア: media/visual, media/tactile
min/max 接頭辞の付加可否: 可

出力デバイスの縦幅（ドキュメントウィンドウといったレンダリング領域ではなく、スクリーンやページ全体の縦幅）を指定します。

表記例

表示先のスクリーンにおける縦幅が 800px 未満であればスタイルシートを適用する場合

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

device-width

値: <length>
メディア: media/visual, media/tactile
min/max 接頭辞の付加可否: 可

出力デバイスの横幅（ドキュメントウィンドウといったレンダリング領域ではなく、スクリーンやページ全体の横幅）を指定します。

表記例

表示先のスクリーンにおける横幅が 800px 未満であればスタイルシートを適用する場合

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

grid

値: <mq-boolean> which is an <integer> that can only have the 0 and 1 value.
メディア: all
min/max 接頭辞の付加可否: 不可

出力デバイスがグリッド式であるかビットマップ式であるかを指定します。グリッドデバイス（TTY ターミナルや携帯電話のディスプレイのように単一のフォントを有するもの）であれば値は 1 になり、それ以外のデバイスであれば値は 0 になります

表記例

ディスプレイ幅が 15 文字以内のモバイル端末にスタイルシートを適用する場合

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

height

値: <length>
メディア: media/visual, media/tactile
min/max 接頭辞の付加可否: 可

出力デバイス縦幅（viewport の縦幅、またはプリンタにおけるページボックスの縦幅）を指定します。

monochrome

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 可

モノクロ（グレースケール）のデバイスにおける bits per pixel を指定します。モノクロデバイスでなければ値は 0 となります。

表記例

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

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

8 bits per pixel 以上のモノクロデバイスにスタイルシートを適用する場合

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

orientation

値: landscape | portrait
メディア: media/visual
min/max 接頭辞の付加可否: 不可

viewport が横向きか縦向きかを指定します。

表記例

ディスプレイが縦向きであればスタイルシートを適用する場合

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

resolution

値: <resolution>
メディア: bitmap
min/max 接頭辞の付加可否: 可

出力デバイスの解像度（画素密度）を指定します。解像度は dots per inch（dpi）か dots per centimeter（dpcm）のどちらでも指定できます。

表記例

300dpi 以上の解像度を持つデバイスにスタイルシートを適用する場合

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

(min-device-pixel-ratio: 2) という古い構文は次のように書き換えることができます。

@media screen and (min-resolution: 2dppx) { ... }

scan

値: progressive | interlace
メディア: media/tv
min/max 接頭辞の付加可否: 不可

出力デバイスのテレビにおける走査方式を指定します。

表記例

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

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

width

値: <length>
メディア: media/visual, media/tactile
min/max 接頭辞の付加可否: 可

出力デバイスのレンダリング領域の横幅（ドキュメントウィンドウの横幅、またはプリンタにおけるページボックスの横幅）を指定します。

表記例

モバイル端末や 20em より横幅が長いスクリーンにスタイルシートを適用する場合

@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 の横幅が 500px 以上 800px 以下のときにスタイルシートを適用する場合

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

Mozilla に固有なメディア特性

Mozilla は Gecko に固有なメディア特性をいくつか提供しています。これらの中には公式なメディア特性として提案されているものもあります。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

デバイスが画像をメニューに表示できれば値が 1 となり、そうでなければ 0 となります。このメディア特性は CSS 疑似クラスの :-moz-system-metric(images-in-menus) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

Mac OS X ユーザが "Graphite" 表示を使用していれば値が 1 となります。通常の blue 表示を使用している、または Mac OS X でなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(mac-graphite-theme) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

Maemo ユーザがオリジナルのテーマを使用していれば値が 1 となり、Fremantle の新しいテーマを使用していれば値が 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(maemo-classic) に対応しています。

値: <number>
メディア: media/visual
min/max 接頭辞の付加可否: 可

CSS 1 ピクセルあたりのデバイスピクセル数を指定します。

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit ベースのブラウザ */
       (min--moz-device-pixel-ratio: 2),    /* Firefox 16 以前 */
       (min-resolution: 2dppx),             /* 標準 */
       (min-resolution: 192dpi)             /* dppx 未サポートのブラウザ */ 

値: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
メディア: media/visual
min/max 接頭辞の付加可否: 不可

使用されている OS を指定します。現在は Windows 上でのみ実装されています。指定できる値は次の通りです。

• windows-xp
• windows-vista
• windows-win7
• windows-win8
• windows-win10

このメディア特性は、アプリケーションのスキンや他の UI を実装するコードが OS 上で上手く動作できるように提供されています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

デバイスの UI において、スクロールバーの末尾に逆方向の矢印ボタンが表示されていれば値が 1 となり、そうでなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(scrollbar-end-backward) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

デバイスの UI において、スクロールバーの末尾に順方向の矢印ボタンが表示されていれば値が 1 となり、そうでなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(scrollbar-end-forward) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

デバイスの UI において、スクロールバーの先頭に逆方向の矢印ボタンが表示されていれば値が 1 となり、そうでなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(scrollbar-start-backward) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

デバイスの UI において、スクロールバーの先頭に順方向の矢印ボタンが表示されていれば値が 1 となり、そうでなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(scrollbar-start-forward) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

デバイスの UI において、 スクロールバーのツマミの大きさが （閲覧しているドキュメントの拡大率に応じて） 可変であれば値は 1 となり、そうでなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(scrollbar-thumb-proportional) に対応しています。

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

デバイスが（タッチスクリーン向けに）タッチイベントをサポートしていれば値が 1 となり、そうでなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(touch-enabled) に対応しています。

使用例

タッチスクリーンのデバイスを使用しているユーザに対して、指で操作しやすくなるようにボタンを少し大きく表示させる、などといった使い道があります。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

Windows ユーザがテーマを使用していない（uxtheme の代わりに旧来のモードを使用している）場合に値が 1 となり、そうでなければ値は 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(windows-classic) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

Windows ユーザが DWM compositor を使用していれば値が 1 となり、そうでなければ値が 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(windows-compositor) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

Windows ユーザがデフォルトのテーマ（Luna、Royale、Zune、Aero（Vista Basic、Vista Advanced、Aero Glass））を使用していれば値が 1 となり、そうでなければ 0 となります。

このメディア特性は CSS 疑似クラスの :-moz-system-metric(windows-default-theme) に対応しています。

値: <integer>
メディア: media/visual
min/max 接頭辞の付加可否: 不可

Windows ユーザが Glass テーマを使用していれば値が 1 となり、そうでなければ値は 0 となります。このテーマは Windows 7 以前のみに存在します。

値: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
メディア: media/visual
min/max 接頭辞の付加可否: 不可

Windows ユーザが使用しているテーマを指定します。このメディア特性は Windows 上でのみ有効で、指定できる値は次の通りです。

• aero
• luna-blue
• luna-olive
• luna-silver
• royale
• generic
• zune

このメディア特性は、アプリケーションのスキンや他の UI を実装するコードが OS 上で上手く動作できるように提供されています。

ブラウザ実装状況

[1] メディアタイプ grid はサポートされていません。

[2] 値に <integer> が使用できます。

[3] 値に <number> が使用できます（仕様に準拠）。

[4] メディアタイプ tv はサポートされていません。

参考

• CSS 3 media query specification
• メディアタイプ
• メディアクエリをコードで利用するには
• モバイル・タブレット端末の viewport サイズ（px）と実サイズの一覧
• CSS Animations Between Media Queries by David Walsh