CSS@media @規則は、一つ又は複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。

メモ: 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>
}

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; }
}

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

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

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

仕様書

仕様書 状態 備考
CSS Conditional Rules Module Level 3
@media の定義
勧告候補 @media 規則の基本的な構文を定義。
Media Queries Level 4
@media の定義
勧告候補

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

Media Queries
@media の定義
勧告 変更なし
CSS Level 2 (Revision 1)
@media の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり169.21.3
speech media type なし なし なし なし9.2 なし
Media feature expressions1 あり199.21.3
any-hover media feature4116 なし1 なし289
any-pointer media feature4112 なし1 なし289
aspect-ratio media feature ? ?3.59 ? なし
color media feature あり ? あり ? あり あり
color-gamut media feature58 ? なし なし45 あり
color-index media feature あり ? なし なし ? ?
display-mode media feature46 なし472 ? ? ?
grid media feature あり ? あり ? あり あり
height media feature ? ? ?9 ? ?
inverted-colors media feature なし ? なし なし なし あり
hover media feature38312 なし1 なし289
light-level media feature なし ? なし なし なし なし
monochrome media feature あり ? あり なし あり あり
orientation media feature あり ? あり ? あり あり
pointer media feature4112 なし1 ?289
resolution media feature29 ?

8

3.54

? あり ?
scan media feature なし ? なし なし なし なし
scripting media feature なし5 ? なし6 なし なし なし
update media feature なし ? なし なし なし なし
width media feature あり ? あり9 あり あり
-moz-device-pixel-ratio media feature なし ?4 ? ? ?
-webkit-animation media feature あり ? ? ? ? ?
-webkit-device-pixel-ratio media feature あり ?

497 8

457 9

なし あり ?
-webkit-max-device-pixel-ratio media feature あり ?

4910 8

4510 9

なし あり ?
-webkit-min-device-pixel-ratio media feature あり ?

4911 8

4511 9

なし あり ?
-webkit-transform-2d media feature なし なし なし なし あり1
-webkit-transform-3d media feature あり ?

49

4612

? あり1
-webkit-transition media feature なし ? なし ? あり1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 ? あり493.1 ?
speech media type なし ? なし なし9 なし なし
Media feature expressions1 ? あり493.1 ?
any-hover media feature414116 なし1289.25.0
any-pointer media feature414112 なし1289.2 ?
aspect-ratio media feature ? ? ? ? ? なし ?
color media feature ? ? ? ? ? ? ?
color-gamut media feature ?58 ? なし45 ? ?
color-index media feature ? ? ? ? ? ? ?
display-mode media feature ?46 なし472 ? ? ?
grid media feature ? ? ? ? ? ? ?
height media feature ? ? ? ? ? ? ?
inverted-colors media feature ? なし ? なし なし あり ?
hover media feature ?5012 なし1289.2 ?
light-level media feature なし なし ? なし なし なし ?
monochrome media feature ? ? ? ? ? ? ?
orientation media feature あり ? ? ? ? ? ?
pointer media feature ?5012 なし1289.2 ?
resolution media feature ? ? ? ? ? ? ?
scan media feature ? ? ? なし ? ? ?
scripting media feature なし5 なし5 ? なし6 なし なし ?
update media feature ? ? ? ? ? ? ?
width media feature ? ? ? ? ? ? ?
-moz-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-animation media feature ? ? ? ? ? ? ?
-webkit-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-max-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-min-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-transform-2d media feature ? ? なし なし ? ? ?
-webkit-transform-3d media feature ? ? ? ? ? ? ?
-webkit-transition media feature ? ? ? ? ? ? ?

1. See bug 1035774.

2. Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.

3. Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.

4. Supports <integer> values only.

5. See bug 489957.

6. See bug 1166581.

7. Implemented as an alias for for -moz-device-pixel-ratio.

8. From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

9. From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

10. Implemented as an alias for for max--moz-device-pixel-ratio.

11. Implemented as an alias for for min--moz-device-pixel-ratio.

12. From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

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

このページの貢献者: mfuji09, SphinxKnight, takahashim, yyss, ethertank, Marsf
最終更新者: mfuji09,