メディアクエリ

ジャンプ先:
  1. リファレンス
  2. ガイド
  3. 仕様書
  4. ブラウザーの対応
  5. 関連情報

メディアクエリによって、サイトやアプリを様々な引数や機器の特性に基づいて合わせることができます。

これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリでは小さい機器でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。

CSS では、 @media @規則を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 @import を使用すると、条件付きでスタイルシート全体を適用することもできます。

HTML でのメディアクエリ

HTML でも、メディアクエリは様々な要素に適用することができます。

  • <link> 要素の media 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。
  • <source> 要素の media 属性では、ソースが適用されるメディアを定義します。 (これは <picture> 要素内でのみ有効です。)
  • <style> 要素の media 属性では、スタイルが適用されるメディアを定義します。

JavaScript でのメディアクエリ

JavaScript では、ウィンドウがメディアクエリに合うかどうかをテストするために Window.matchMedia() メソッドを利用することができます。また、 MediaQueryList.addListener() を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが機器の設定、方向、状態が変化したときに応答することができます。

プログラムからのメディアクエリの使用については、メディアクエリのテストで知ることができます。

リファレンス

CSS @規則

ガイド

メディアクエリの利用
メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。
プログラムからのメディアクエリのテスト
JavaScript の中でメディアクエリを使用して機器の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナをセットアップする方法を説明します。

仕様書

仕様書 状態 備考
Unknown 不明  
CSS Conditional Rules Module Level 3 勧告候補  
Media Queries Level 4 勧告候補  
Media Queries 勧告  
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 feature4 ?3.5953 あり
color media feature あり ? あり ? あり あり
color-gamut media feature58 ? なし なし45 あり
color-index media feature あり ? なし なし ? ?
device-aspect-ratio media feature あり ? あり ? ? ?
device-height media feature あり ? あり ? ? ?
device-width 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 あり ? あり ? あり あり
overflow-block media feature なし ? なし4 ? ? ?
overflow-inline media feature なし ? なし4 ? ? ?
pointer media feature4112 なし1 ?289
prefers-reduced-motion media feature なし なし63 なし なし10.1
resolution media feature29 ?

8

3.55

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

498 9

4510 8

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

4911 9

4510 11

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

638

4912 9

4510 12

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

49

4613

 ? あり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 ? ? ? ? ? ? ?
device-aspect-ratio media feature ? あり ? あり ? ? ?
device-height media feature ? あり ? あり ? ? ?
device-width 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 あり ? ? ? ? ? ?
overflow-block media feature ? なし ? なし4 ? ? ?
overflow-inline media feature ? なし ? なし4 ? ? ?
pointer media feature ?5012 なし1289.2 ?
prefers-reduced-motion media feature なし なし なし なし なし10.3 ?
resolution media feature ? ? ? ? ? ? ?
scan media feature ? ? ? なし ? ? ?
scripting media feature なし6 なし6 ? なし7 なし なし ?
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. See bug 1422235.

5. Supports <integer> values only.

6. See bug 489957.

7. See bug 1166581.

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

9. 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.

10. 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.

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

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

13. 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.

関連情報

  • @supports を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。

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

タグ: 
このページの貢献者: mfuji09, ethertank
最終更新者: mfuji09,