@media

CSS@media @-規則は、一つまたは複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。

メモ: JavaScript では、 @media を使用して作成されたルールは、 CSS オブジェクトモデルの CSSMediaRule インターフェイスによってアクセスすることができます。

構文

@media @-規則は、コードの最上位に配置したり、他の条件付きグループ @-規則の中に入れ子にして配置したりすることができます。

/* コードの最上位 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 他の条件付き@規則の中にネスト */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

メディアクエリの文法について詳しくは、メディアクエリの利用を参照してください。

形式文法

@media <media-query-list> {
  <group-rule-body>
}

ここで
<media-query-list> = <media-query>#

ここで
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

ここで
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

ここで
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

ここで
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

ここで
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

ここで
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

メディア特性

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

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

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

他の例については、メディアクエリの利用をご覧ください。

アクセシビリティの考慮事項

サイトの文字の大きさを調整する人のために、メディアクエリ<length> が必要な時には em を使用してください。

em および px はどちらも有効な単位ですが、 em はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。

また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 prefers-reduced-motionユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します

セキュリティ

メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。

この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。

仕様書

仕様書 備考 フィードバック
Media Queries Level 5
@media の定義
Level 4 で除外された light-level, inverted-colors およびカスタムメディアクエリを復帰。
prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, prefers-color-scheme の各メディア特性を追加。
CSS Working Group drafts GitHub issues
CSS Conditional Rules Module Level 3
@media の定義
勧告候補 @media 規則の基本的な構文を定義。
Media Queries Level 4
@media の定義

メディア特性 scripting, pointer, hover, update, overflow-block, overflow-inline を追加。
screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定。
構文をもっと柔軟にし、他の事の間に or キーワードを追加。

CSS Working Group drafts GitHub issues
Media Queries
@media の定義
CSS Level 2 (Revision 1)
@media の定義
初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報