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

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

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 規則

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 6Opera 完全対応 9.2Safari 完全対応 1.3WebView Android 完全対応 1Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9Safari iOS 完全対応 3.1Samsung Internet Android ?
speech media typeChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 9.2Safari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 9Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
Media feature expressionsChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 9Opera 完全対応 9.2Safari 完全対応 1.3WebView Android 完全対応 1Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9Safari iOS 完全対応 3.1Samsung Internet Android ?
any-hover media featureChrome 完全対応 41Edge 完全対応 16Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1035774.
IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 41Edge Mobile 完全対応 16Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1035774.
Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android 完全対応 5.0
any-pointer media featureChrome 完全対応 41Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1035774.
IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android 完全対応 41Chrome Android 完全対応 41Edge Mobile 完全対応 12Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1035774.
Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?
aspect-ratio media featureChrome 完全対応 4Edge ? Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 53Safari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
color media featureChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-gamut media featureChrome 完全対応 58Edge ? Firefox 未対応 なしIE 未対応 なしOpera 完全対応 45Safari 完全対応 ありWebView Android ? Chrome Android 完全対応 58Edge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 45Safari iOS ? Samsung Internet Android ?
color-index media feature
非推奨非標準
Chrome 完全対応 ありEdge ? Firefox 未対応 なしIE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
device-aspect-ratio media feature
非推奨非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android ? Chrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
device-height media feature
非推奨非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android ? Chrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
device-width media featureChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android ? Chrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
display-mode media featureChrome 完全対応 46Edge 未対応 なしFirefox 完全対応 47
補足
完全対応 47
補足
補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE ? Opera ? Safari ? WebView Android ? Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android 完全対応 47
補足
完全対応 47
補足
補足 Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android ? Safari iOS ? Samsung Internet Android ?
grid media featureChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
height media featureChrome ? Edge ? Firefox ? IE 完全対応 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inverted-colors media feature
実験的非標準
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 ありWebView Android ? Chrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 ありSamsung Internet Android ?
hover media featureChrome 完全対応 38
補足
完全対応 38
補足
補足 Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge 完全対応 12Firefox 完全対応 64IE 未対応 なしOpera 完全対応 28Safari 完全対応 9WebView Android ? Chrome Android 完全対応 50Edge Mobile 完全対応 12Firefox Android 完全対応 64Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?
light-level media feature
実験的非標準
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
monochrome media featureChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
orientation media featureChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-block media feature
実験的非標準
Chrome 未対応 なしEdge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-inline media feature
実験的非標準
Chrome 未対応 なしEdge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
pointer media featureChrome 完全対応 41Edge 完全対応 12Firefox 完全対応 64IE ? Opera 完全対応 28Safari 完全対応 9WebView Android ? Chrome Android 完全対応 50Edge Mobile 完全対応 12Firefox Android 完全対応 64Opera Android 完全対応 28Safari iOS 完全対応 9.2Samsung Internet Android ?
prefers-reduced-motion media feature
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 未対応 なしSafari 完全対応 10.1WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 10.3Samsung Internet Android ?
resolution media featureChrome 完全対応 29Edge ? Firefox 完全対応 8
完全対応 8
部分対応 3.5
補足
補足 Supports <integer> values only.
IE ? Opera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scan media featureChrome 未対応 なしEdge ? Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?
scripting media feature
実験的非標準
Chrome 未対応 なし
補足
未対応 なし
補足
補足 See bug 489957.
Edge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1166581.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 489957.
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 489957.
Edge Mobile ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1166581.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
update media feature
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
width media featureChrome 完全対応 ありEdge ? Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-moz-device-pixel-ratio media feature
非推奨非標準
Chrome 未対応 なしEdge ? Firefox 完全対応 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-animation media feature
非標準
Chrome 完全対応 ありEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-device-pixel-ratio media feature
非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 49
補足 無効
完全対応 49
補足 無効
補足 Implemented as an alias for for -moz-device-pixel-ratio.
無効 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.
完全対応 45
補足 無効
補足 Implemented as an alias for for -moz-device-pixel-ratio.
無効 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.
IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-max-device-pixel-ratio media feature
非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 49
補足 無効
完全対応 49
補足 無効
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
無効 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.
完全対応 45
補足 無効
補足 Implemented as an alias for for max--moz-device-pixel-ratio.
無効 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.
IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-min-device-pixel-ratio media feature
非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 63
補足
完全対応 63
補足
補足 Implemented as an alias for for -moz-device-pixel-ratio.
完全対応 49
補足 無効
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
無効 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.
完全対応 45
補足 無効
補足 Implemented as an alias for for min--moz-device-pixel-ratio.
無効 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.
IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-2d media feature
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-3d media feature
非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 49
完全対応 49
完全対応 46
無効
無効 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.
IE ? Opera 完全対応 ありSafari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transition media feature
非推奨非標準
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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

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