メディアクエリーの使用

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

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

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

構文

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

メディア種別(指定されている場合)が文書を表示する端末と照合され、かつ、すべてのメディア機能式が true と計算されると、メディアクエリーは true と計算されます。 未知のメディア種別を含むクエリは常に false となります。

Note: <link> タグにメディアクエリーがついていた場合、スタイルシートはクエリーが false を返したとしてもダウンロードされますが、ダウンロードの優先度ははるかに低くなります。 ただし、その内容は、クエリーの結果が true にならない限り適用されません。 なぜこのようになるかは、 Tomayac 氏のブログ Why Browser Download Stylesheet with Non-Matching Media Queries に書かれています。

メディア種別を対象にする

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

@media print { ... }

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

@media screen, print { ... }

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

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

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

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

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

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

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

@media (color) { ... }

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

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

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

複合メディアクエリーの作成

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

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

Note: 多くの場合、 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) { ... }

Level 4 での構文の拡張

Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリーを作れるよう構文が拡張されました。 Level 4 はこのようなクエリーを書くために範囲コンテキストを追加しています。例えば、幅について max- の特性を使用する場合は、以下のように書くことができます。

Note: Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は @media ブラウザー互換性一覧表を参照してください。

@media (max-width: 30em) { ... }

Media Queries Level 4 では、これを次のように書くことができます。

@media (width <= 30em) { ... }

min- および max- を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。

@media (min-width: 30em) and (max-width: 50em) { ... }

Level 4 の構文に変換すると、次のようになります。

@media (30em <= width <= 50em ) { ... }

また、 Media Queries Level 4 では and, not, or を伴う完全な論理代数を使ったメディアクエリーの組み合わせの方法も追加されました。

not による特性の否定

not() を使用してメディア特性を囲むと、クエリーのその特性を否定します。例えば、 not(hover) は端末でホバーができない場合に一致します。

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

or を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば true になります。例えば、次のクエリーは端末がモノクロ画面である、またはホバーができるかどうかを検査します。

@media (not (color)) or (hover) { ... }

関連情報