メディアクエリは、一般的な機器の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。

メディアクエリは以下の用途で使用されます。

メモ: このページの例では説明のために CSS の @media を使用していますが、基本構文はすべての種類のメディアクエリで共通です。

構文

メディアクエリは、任意のメディアタイプと任意の数のメディア特性の式で構成されます。論理演算子を使用して、複数のクエリを様々な形で組み合わせることができます。メディアクエリは大文字・小文字の区別がありません。

メディアクエリは、 (指定されていれば) メディアタイプが文書を表示している機器に一致しており、かつすべてのメディア特性式が真と計算されれば、真と計算されます。不明なメディアタイプに対するクエリは常に偽です。

メモ: <link> タグによるメディアクエリ付きのスタイルシートは、クエリが偽を返してもダウンロードされます。にもかかわらず、中身はクエリが真に変わらない限り、適用されません。

メディアタイプ

メディアタイプは機器の全般的なカテゴリを説明します。 not 又は only の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 all タイプが暗黙に含まれています。

all
すべての機器に一致します。
print
ページ付きの素材や、印刷プレビューモードで画面に表示された文書のためのものです。 (これらの形式に特有の整形上の問題について詳しくは、ページ付きメディアをご覧ください。)
screen
主に画面のためのものです。
speech
主に音声合成のためのものです。
非推奨のメディアタイプ: CSS2.1 及びメディアクエリ 3 では、いくつかの追加のメディアタイプ (tty, tv, projection, handheld, braille, embossed, and aural) を定義しましたが、これらはメディアクエリ 4 で非推奨となり、使用するべきではありません。 aural タイプは似ている speech で置き換えられました。

メディア特性

メディア特性は、特定のユーザーエージェントや、出力機器や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。

名前 概要 備考
width ビューポートの幅  
height ビューポートの高さ  
aspect-ratio ビューポートの幅対高さのアスペクト比  
orientation ビューポートの向き  
resolution 出力機器のピクセル密度  
scan 出力機器のスキャン処理方式  
grid 出力機器はグリッドとビットマップ画面のどちらを使用するか  
update どれだけの頻度で出力機器がコンテンツの表示を変更できるか Media Queries Level 4 で追加。
overflow-block ビューポートをブロック軸方向にあふれたコンテンツを出力機器がどのように扱うか Media Queries Level 4 で追加。
overflow-inline ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか Media Queries Level 4 で追加。
color 出力機器の色コンポーネントあたりの色数、又は機器がカラーでなければゼロ  
color-gamut ユーザーエージェント及び出力機器が対応しているおよその色の範囲 Media Queries Level 4 で追加。
color-index 出力機器の色参照表の項目数、又は機器がそのような表を使用していないのであればゼロ  
display-mode ウェブアプリのマニフェストの display メンバーで指定されているアプリケーションの表示モード Web App Manifest 仕様書で定義
monochrome 出力機器のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は機器がモノクロでなければゼロ  
inverted-colors ユーザーエージェント又はその下の OS が色を反転しているか Media Queries Level 5 に延期。
pointer 主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか Media Queries Level 4 で追加。
hover 主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか Media Queries Level 4 で追加。
any-pointer 入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか Media Queries Level 4 で追加。
any-hover 入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか Media Queries Level 4 で追加。
light-level 環境の明るさレベル Media Queries Level 5 に延期。
scripting スクリプト (例えば Javascript) が利用できるか Media Queries Level 5 に延期。
device-width 出力機器のレンダリング面の幅 Media Queries Level 4 で非推奨。
device-height 出力機器のレンダリング面の高さ Media Queries Level 4 で非推奨。
device-aspect-ratio 出力機器の幅対高さのアスペクト比 Media Queries Level 4 で非推奨。

論理演算子

論理演算子 not, and, only を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをコンマで区切って、単一の規則にまとめることもできます。

and

and 演算子は、複数のメディア特性を一つのメディアクエリにまとめるために使用し、クエリが真になるためには結合されたそれぞれの特性が真を返す必要があります。メディア特性とメディアタイプを組み合わせるためにも使用します。

not

not 演算子は、メディアクエリを否定するために使用し、もしクエリが偽を返せば真を返します。コンマ区切りのクエリのリストの中にある場合、適用された特定のクエリのみを否定します。 not 演算子を使用する場合は、メディアタイプも指定しなければなりません

メモ: not キーワードは個別のメディア特性式を否定するために使用することはできず、メディアクエリ全体に対してしか使用できません。

only

only 演算子はクエリ全体が一致した場合にスタイルを適用し、古いブラウザーで選択されたスタイルが適用されるのを防ぐために使用します。 only 演算子を使用する場合は、メディアタイプも指定しなければなりません

, (コンマ)

コンマは、複数のメディアクエリを一つのメディアクエリに結合するために使用します。コンマで区切ったリストの中にあるそれぞれのクエリは、他とは別なものとして扱われます。よって、リストの中の何れかのクエリが真になれば、メディアステートメント全体が真を返します。言い換えれば、リストは論理 or 演算子のように動作します。

メディアタイプの対象化

メディアタイプは、その機器の一般的なカテゴリを記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや音声ベースのスクリーンリーダーのような、特殊な機器を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。

@media print { ... }

複数の機器を対象にすることもできます。例えば、この @media ルールは2つのメディアクエリーを使用して、画面とプリンターの両方の機器を対象としています。

@media screen, print { ... }

すべてのメディアタイプの一覧は、メディアタイプを参照してください。とても広い用語で機器を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりにメディア特性を使用してください。

メディア特性を対象とする

メディア特性は、ユーザーエージェント、出力機器、環境などの特定の特徴を記述します。例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される機器などに対して特定のスタイルを適用することができます。この例はユーザーの主な入力手段 (マウスなど) が要素の上で停止できる時にスタイルを適用します。

@media (hover: hover) { ... }

多くのメディア特性は範囲特性であり、 "min-" 又は "max-" の接頭辞をつけて「最小条件」又は「最大条件」の制約を表現します。例えば、この CSS はブラウザーのビューポートの幅が 12,450px 以下である場合のみ、スタイルを適用します。

@media (max-width: 12450px) { ... }

値を指定せずにメディア特性クエリを作成した場合、特性の値がゼロではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の機器に適用されます。

@media (color) { ... }

ブラウザーを実行している機器である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリの中のスタイルは、音声のみの機器には画面のアスペクト比がないので、決して使われません。

@media speech and (aspect-ratio: 11/5) { ... }

その他のメディア特性の例については、それぞれの特性のリファレンスページを参照してください。

複雑なメディアクエリの作成

時々、複数の条件に依存するメディアクエリを作成したくなる場合があるかもしれません。これは、 not, and, only論理演算子の出番です。その上、複数のメディアクエリをコンマ区切りのリストで結合することができます。これによって、同じスタイルを異なる場面に適用することができます。

以前の例で、すでに and 演算子がメディアタイプとメディア特性をグループ化するために使用されているのを見ました。 and演算子は、複数のメディア特性を1つのメディアクエリに結合することもできます。一方で not 演算子は、メディアクエリを反転し、基本的に普通の意味とは逆になります。 only 演算子は古いブラウザーでスタイルが適用されるのを防止します。

メモ: 多くの場合、 all メディアタイプが他のタイプが指定されない場合に既定で使用されます。しかし、 not 又は only 演算子を使用する場合は、メディアタイプを明示的に指定する必要があります。

複数のタイプ又は特性の組み合わせ

and キーワードはメディア特性をメディアタイプ、又は他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある機器に制限します。

@media (min-width: 30em) and (orientation: landscape) { ... }

スタイルを画面に限定する場合は、メディア特性に screen メディアタイプを結合します。

@media screen and (min-width: 30em) and (orientation: landscape) { ... }

複数のクエリの検査

コンマ区切りのリストを使うと、ユーザーの機器が様々なメディアタイプ、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下の規則はユーザーの機器の高さが 680px 以上又は画面が縦長モードであるときにスタイルが適用されます。

@media (min-height: 680px), screen and (orientation: portrait) { ... }

上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリが適用され、 media ステートメントはやはり真を返します。

クエリの意味の反転

not キーワードはメディアクエリ全体の意味を反転します。これは、適用される特定のメディアクエリを単純に反転します。 (従って、メディアクエリのコンマ区切りのリストの中では、それぞれのメディアクエリは適用されません。) not キーワードは個別の特性クエリに対して使用することができず、クエリ全体のみを反転します。 not は以下のクエリの最後に評価されます。

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

... よって、上記のクエリは次のように評価されます。

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

... このようにはなりません。

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

他の例を挙げます。以下のメディアクエリは、

@media not screen and (color), print and (color) { ... }

... 次のように評価されます。

@media (not (screen and (color))), print and (color) { ... }

古いブラウザーとの互換性の維持

only キーワードは、メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。最近のブラウザーでは効果がありません。

@media (only screen and (color)) { ... }

関連情報

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

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