We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

メディアクエリは、機器の一般的な種類 (プリンタと画面など)、特定の特性 (ブラウザーのビューポートの幅など)、環境 (環境光の状態など) によって CSS スタイルを適用したい時に便利です。非常に様々なインターネット接続端末が利用できる今日、メディアクエリは、ユーザーがどのようなハードウェアを使用しても耐えうるウェブサイトやアプリの構築に不可欠なツールです。

メディアタイプを対象とする

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

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キーワードは個別の特性クエリに対して使用することができず、クエリ全体のみを反転します。 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

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

<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />

関連情報

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

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