メディアクエリによって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。
これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。
CSS では、 @media @-規則を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 @import を使用すると、条件付きでスタイルシート全体を適用することもできます。
HTML でのメディアクエリ
HTML でも、メディアクエリは様々な要素に適用することができます。
<link>要素のmedia属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。<source>要素のmedia属性では、ソースが適用されるメディアを定義します。 (これは<picture>要素内でのみ有効です。)<style>要素のmedia属性では、スタイルが適用されるメディアを定義します。
JavaScript でのメディアクエリ
JavaScript では、ウィンドウがメディアクエリに合うかどうかをテストするために Window.matchMedia() メソッドを利用することができます。また、 MediaQueryList.addListener() を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。
プログラムからのメディアクエリの使用については、メディアクエリのテストで知ることができます。
リファレンス
CSS @規則
ガイド
- メディアクエリの利用
- メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。
- プログラムからのメディアクエリのテスト
- JavaScript の中でメディアクエリを使用して端末の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。
- アクセシビリティのためのメディアクエリの使用
- ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Media Queries Level 5 | 編集者草案 | |
| CSS Conditional Rules Module Level 3 | 勧告候補 | |
| Media Queries Level 4 | 勧告候補 | |
| Media Queries | 勧告 | |
| CSS Level 2 (Revision 1) | 勧告 | 初回定義 |
ブラウザーの対応
@media 規則
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
@media | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 6 | Opera 完全対応 9.2 | Safari 完全対応 1.3 | WebView Android 完全対応 1 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 3.1 | Samsung Internet Android 完全対応 1.0 |
any-hover media feature | Chrome 完全対応 41 | Edge 完全対応 16 | Firefox 完全対応 64 | IE 未対応 なし | Opera 完全対応 28 | Safari 完全対応 9 | WebView Android 完全対応 41 | Chrome Android 完全対応 41 | Firefox Android 完全対応 64 | Opera Android 完全対応 28 | Safari iOS 完全対応 9.2 | Samsung Internet Android 完全対応 5.0 |
any-pointer media feature | Chrome 完全対応 41 | Edge 完全対応 12 | Firefox 完全対応 64 | IE 未対応 なし | Opera 完全対応 28 | Safari 完全対応 9 | WebView Android 完全対応 41 | Chrome Android 完全対応 41 | Firefox Android 完全対応 64 | Opera Android 完全対応 28 | Safari iOS 完全対応 9.2 | Samsung Internet Android ? |
aspect-ratio media feature | Chrome 完全対応 3 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 4.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 4.2 | Samsung Internet Android 完全対応 1.0 |
calc() expressions | Chrome 完全対応 66 | Edge 未対応 なし | Firefox 完全対応 59 | IE 未対応 なし | Opera 完全対応 53 | Safari 完全対応 12 | WebView Android 完全対応 66 | Chrome Android 完全対応 66 | Firefox Android 完全対応 59 | Opera Android 完全対応 47 | Safari iOS 完全対応 12 | Samsung Internet Android 完全対応 あり |
color media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
color-gamut media feature | Chrome 完全対応 58 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 完全対応 45 | Safari 完全対応 10 | WebView Android 完全対応 58 | Chrome Android 完全対応 58 | Firefox Android 未対応 なし | Opera Android 完全対応 43 | Safari iOS 完全対応 10 | Samsung Internet Android 完全対応 7.0 |
color-index media feature | Chrome 完全対応 29 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 完全対応 16 | Safari 完全対応 8 | WebView Android 完全対応 あり | Chrome Android 完全対応 29 | Firefox Android 未対応 なし | Opera Android 完全対応 16 | Safari iOS 完全対応 8 | Samsung Internet Android 完全対応 2.0 |
device-aspect-ratio media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
device-height media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
device-width media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
display-mode media feature | Chrome 完全対応 45 | Edge 未対応 なし | Firefox
完全対応
47
| IE 未対応 なし | Opera 完全対応 32 | Safari 完全対応 13 | WebView Android 完全対応 45 | Chrome Android 完全対応 45 | Firefox Android
完全対応
47
| Opera Android 完全対応 32 | Safari iOS 完全対応 13 | Samsung Internet Android 完全対応 5.0 |
grid media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 10 | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
height media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
hover media feature | Chrome
完全対応
38
| Edge 完全対応 12 | Firefox 完全対応 64 | IE 未対応 なし | Opera 完全対応 28 | Safari 完全対応 9 | WebView Android
完全対応
38
| Chrome Android 完全対応 50 | Firefox Android 完全対応 64 | Opera Android 完全対応 28 | Safari iOS 完全対応 9.2 | Samsung Internet Android ? |
inverted-colors media feature | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 完全対応 9.1 | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 完全対応 10 | Samsung Internet Android 未対応 なし |
light-level media feature | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android ? |
| Media feature expressions | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 9 | Opera 完全対応 9.2 | Safari 完全対応 1.3 | WebView Android 完全対応 1 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 3.1 | Samsung Internet Android ? |
| Media query value support | Chrome 完全対応 66 | Edge 未対応 なし | Firefox 完全対応 59 | IE 未対応 なし | Opera 完全対応 53 | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 完全対応 66 | Firefox Android 未対応 なし | Opera Android 完全対応 47 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
monochrome media feature | Chrome 完全対応 1 | Edge 未対応 なし | Firefox 完全対応 2 | IE 未対応 なし | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
orientation media feature | Chrome 完全対応 3 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 4.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 4.2 | Samsung Internet Android 完全対応 1.0 |
overflow-block media feature | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 66 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 66 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
overflow-inline media feature | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 66 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 66 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
pointer media feature | Chrome 完全対応 41 | Edge 完全対応 12 | Firefox 完全対応 64 | IE 未対応 なし | Opera 完全対応 28 | Safari 完全対応 9 | WebView Android 完全対応 41 | Chrome Android 完全対応 50 | Firefox Android 完全対応 64 | Opera Android 完全対応 28 | Safari iOS 完全対応 9.2 | Samsung Internet Android ? |
prefers-color-scheme media feature | Chrome 完全対応 76 | Edge 未対応 なし | Firefox 完全対応 67 | IE 未対応 なし | Opera 未対応 なし | Safari 完全対応 12.1 | WebView Android 完全対応 76 | Chrome Android 完全対応 76 | Firefox Android 完全対応 67 | Opera Android 未対応 なし | Safari iOS 完全対応 13 | Samsung Internet Android ? |
prefers-reduced-motion media feature | Chrome 完全対応 74 | Edge 未対応 なし | Firefox 完全対応 63 | IE 未対応 なし | Opera 未対応 なし | Safari 完全対応 10.1 | WebView Android 完全対応 74 | Chrome Android 完全対応 74 | Firefox Android 完全対応 64 | Opera Android 未対応 なし | Safari iOS 完全対応 10.3 | Samsung Internet Android ? |
resolution media feature | Chrome 完全対応 27 | Edge 完全対応 12 | Firefox
完全対応
8
| IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 6.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 27 | Firefox Android
完全対応
8
| Opera Android 完全対応 あり | Safari iOS 完全対応 7 | Samsung Internet Android 完全対応 1.5 |
scan media feature | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
scripting media feature | Chrome
未対応
なし
| Edge 未対応 なし | Firefox
未対応
なし
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android
未対応
なし
| Chrome Android
未対応
なし
| Firefox Android
未対応
なし
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android ? |
speech media type | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 完全対応 9.2 | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android 完全対応 10.1 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
update media feature | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
width media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 2 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
-moz-device-pixel-ratio media feature | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 4 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 4 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
-webkit-animation media feature | Chrome 未対応 2 — 36 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 23 | Safari 完全対応 4 | WebView Android 未対応 ? — 37 | Chrome Android 未対応 18 — 36 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 24 | Safari iOS 完全対応 3.2 | Samsung Internet Android 未対応 1.0 — 3.0 |
-webkit-device-pixel-ratio media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox
完全対応
63
| IE 未対応 なし | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android
完全対応
63
| Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
-webkit-max-device-pixel-ratio media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox
完全対応
63
| IE 未対応 なし | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android
完全対応
63
| Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
-webkit-min-device-pixel-ratio media feature | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox
完全対応
63
| IE 未対応 なし | Opera 完全対応 あり | Safari 完全対応 3 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android
完全対応
63
| Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 1.0 |
-webkit-transform-2d media feature | Chrome 未対応 2 — 36 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 23 | Safari 完全対応 4 | WebView Android 未対応 ? — 37 | Chrome Android 未対応 18 — 36 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 24 | Safari iOS 完全対応 3.2 | Samsung Internet Android 未対応 1.0 — 3.0 |
-webkit-transform-3d media feature | Chrome 未対応 2 — 36 | Edge 完全対応 12 | Firefox
完全対応
49
| IE 未対応 なし | Opera 未対応 ? — 23 | Safari 完全対応 4 | WebView Android 未対応 ? — 37 | Chrome Android 未対応 18 — 36 | Firefox Android
完全対応
49
| Opera Android 未対応 ? — 24 | Safari iOS 完全対応 3.2 | Samsung Internet Android 未対応 1.0 — 3.0 |
-webkit-transition media feature | Chrome 未対応 2 — 36 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 23 | Safari 完全対応 4 | WebView Android 未対応 ? — 37 | Chrome Android 未対応 18 — 36 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 24 | Safari iOS 完全対応 3.2 | Samsung Internet Android 未対応 1.0 — 3.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
関連情報
@supportsを使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。