@media

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

構文

@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>
}
where 
<media-query-list> = <media-query>#
where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where 
<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>
where 
<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>
where 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
where 
<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>
where 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

メディア特性

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

例

@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 で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。

仕様書

ブラウザーの互換性

関連情報

• メディアクエリの利用
• JavaScript では @media は CSS オブジェクトモデルの CSSMediaRule インターフェイスを通じてアクセスすることができます。
• Mozilla 拡張メディア特性
• WebKit 拡張メディア特性