メディアクエリーの使用

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

• メディア種別は、メディアクエリーを適用する機器の大まかな分類を all, print, screen, speech で定義します。

  種別は省略可能 (all と見なされる) ですが、 not や only 論理演算子を使用する場合は例外です。

• メディア特性は、ユーザーエージェント、出力機器、環境などの特定の特徴を記述します。 any-hover, any-pointer, aspect-ratio, color, color-gamut, color-index, device-aspect-ratio 非推奨; , device-height 非推奨; , device-width 非推奨; , display-mode, forced-colors, grid, height, hover, inverted-colors, monochrome, orientation, overflow-block, overflow-inline, pointer, prefers-color-scheme, prefers-contrast, prefers-reduced-motion, resolution, scripting, update, width があります。

  例えば、hover という機能では、端末が要素の上で停止したことを検出できるかどうかをクエリーで検査することができます。 メディア特性式は、その存在や値をテストするもので、完全にオプションです。 それぞれのメディア特性式は括弧で囲む必要があります。

• 論理演算子は、複合的なメディアクエリーを構成するために使用します。 not, and, only があります。 また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。

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

メディア種別は、その機器の一般的な分類を記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや、音声ベースのスクリーンリーダーのような特殊な機器を対象としたスタイルを作成したい場合もあるでしょう。例えば、この 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 演算子は古いブラウザーでスタイルが適用されるのを防止します。

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) { ... }

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

@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(hover) は端末でホバーができない場合に一致します。

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

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

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

• プログラムからのメディアクエリーの検査
• CSS Animations Between Media Queries
• Mozilla 拡張メディア特性
• WebKit 拡張メディア特性