MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

メディアクエリの利用

メディアクエリ は、メディアタイプならびに、横幅・高さ・色などのメディア特性を用いてスタイルシートの適用範囲を制御する式(一つ以上)から構成されます。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 が指定されているものと解釈されます。

論理演算子

notandonly といった論理演算子を用いて、複雑なメディアクエリを組み立てることができます。 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

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

補足: 上記のように、expression の前後には括弧が必要です。もし書かれていなければエラーとなります。

メディア特性

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

補足: ブラウザが動作しているデバイスに当該のメディア特性が存在しない場合、そのメディア特性に関係する評価式は常に偽となります。例えば、聴覚デバイスに対するアスペクト比のメディア特性は常に偽と評価されます。

color

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

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

補足: 出力デバイスが異なる色深度を持っている場合は、その中で最もビット数が少ない色深度がデバイス特性になります。例えば、ディスプレイが青と赤に対しては 5 ビットを使用しながらも緑には 6 ビットを使用している場合、 そのデバイスは 5 ビットの色深度を持っているものと扱われます。デバイスがインデックスカラーを使用している場合、参照しているテーブル内で最もビット数が少ない色深度がデバイス特性になります。

表記例

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

@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="http://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) { ... }
補足: グリッドデバイスにおける "em" 単位は特別な意味を持ちます。"1em" の幅を正確に決めることはできないため、  1em はグリッドセルにおける水平方向の横幅、垂直方向の縦幅として扱われます。

height

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

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

補足: ユーザがウィンドウの幅を変化させた場合、同時に Firefoxは widthheight のメディア特性を参照し、スタイルシートはメディアクエリに従って適切に変更されます。

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) { ... }
補足: この値はデバイスにおける実際の方向とは必ずしも一致しません。ほとんどのデバイスにおいて、ソフトキーボードを起動すると viewport は横長になり、portrait の代わりに landscape のスタイルが適用されます。

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

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

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

表記例

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

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

width

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

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

補足: ユーザがウィンドウの幅を変化させた場合、同時に Firefoxは widthheight のメディア特性を参照し、スタイルシートはメディアクエリに従って適切に変更されます。

表記例

モバイル端末や 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="http://foo.com/mystyle.css" />

viewport の横幅が 500px 以上 800px 以下のときにスタイルシートを適用する場合

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

Mozilla に固有なメディア特性

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

-moz-images-in-menus

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

-moz-mac-graphite-theme

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-maemo-classic

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-device-pixel-ratio

Gecko 2.0 が必要(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
非推奨 Gecko &16

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

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

この機能は使用しないでください

代わりに resolution メディア特性を dppx 単位とともに使用してください。

-moz-device-pixel-ratio は Firefox 16 以前との互換性を保つために、-webkit-device-pixel-ratiodppx をサポートしていない Webkit ベースのブラウザとの互換性を保つために使用できます。

表記例

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

resolutiondppx の互換性に関するグッドプラクティスについては CSSWG の記事 を参照してください。

補足: このメディア特性は -webkit-device-pixel-ratio として Webkit と IE 11 for Windows Phone 8.1 でも実装されています。Gecko において min と max の接頭辞は min--moz-device-pixel-ratiomax--moz-device-pixel-ratio の名前で実装されていますが、Webkit において同じ接頭辞は -webkit-min-device-pixel-ratio-webkit-max-device-pixel-ratio という名前で実装されています。

-moz-os-version

Gecko 25.0 が必要(Firefox 25.0 / Thunderbird 25.0 / SeaMonkey 2.22)

値: 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 上で上手く動作できるように提供されています。

-moz-scrollbar-end-backward

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-scrollbar-end-forward

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-scrollbar-start-backward

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-scrollbar-start-forward

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-scrollbar-thumb-proportional

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-touch-enabled

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

使用例

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

-moz-windows-classic

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-windows-compositor

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

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

-moz-windows-default-theme

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

値: <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) に対応しています。

-moz-windows-glass

Gecko 21.0 が必要(Firefox 21.0 / Thunderbird 21.0 / SeaMonkey 2.18)

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

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

-moz-windows-theme

Gecko 2.0 が必要(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

値: 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 上で上手く動作できるように提供されています。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 21 3.5 (1.9.1) 9.0 9 4
grid ? 未サポート [1] ? ? ?
resolution 29 3.5 (1.9.1) [2]
8.0 (8.0) [3]
? ? ?
scan ? 未サポート [4] ? ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) ? (有) (有)

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

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

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

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

 

参考

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, mrstork, malayaleecoder, hashedhyphen
 最終更新者: Sebastianz,