Media queries
@media は CSS のアットルールで、1 つまたは複数のメディアクエリーの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。
メモ: JavaScript では、 @media を使用して作成されたルールは、 CSS オブジェクトモデルの CSSMediaRule インターフェイスによってアクセスすることができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 1 | |
| aspect-ratio は CSS のメディア特性で、viewportのaspect ratioを調べるために使用します。 | 3 | 12 | 3.5 | 5 | 18 | 4.2 |
| calc() は CSS の関数で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 <length>、<frequency>、angle、<time>、<percentage>、<number>、<integer>、color_value の値が利用できる場所ならば使用できます。 | 66 | 79 | 59 | 12 | 66 | 12 |
| color は CSS のメディア特性で、出力機器の色成分（赤、緑、青）当たりのビット数を調べるために使用します。 | 1 | 12 | 2 | 3 | 18 | 1 |
| color-index は CSS のメディア特性で、出力端末の色参照テーブルの項目数を調べるために使用します。 | 29 | 79 | | 8 | 29 | 8 |
| grid は CSS のメディア特性で、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。 | 1 | 12 | 2 | 3 | 18 | 1 |
| height は CSS のメディア特性で、viewportの高さ（またはページメディアではページボックスの高さ）に基づいてスタイルを適用するために使用することができます。 | 1 | 12 | 2 | 3 | 18 | 1 |
media features メディア特徴表現 | 1 | 12 | 1 | 3 | 18 | 1 |
media query values メディアクエリ値のサポート | 66 | 79 | 59 | | 66 | |
| monochrome は CSS のメディア特性で、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。 | 1 | 79 | 2 | 3 | 18 | 1 |
nested-queries ネストされたメディアクエリ | 26 | 12 | 11 | 7 | 26 | 7 |
| メディアクエリーによって、端末の種類（プリンターや画面など）や、画面の解像度、向き、aspect ratio、ブラウザーのviewportの幅や高さ、ユーザーの設定（動きの軽減、データの使用、透明度など）などの機能や特徴に応じて CSS スタイルを適用することができます。 | 104 | 104 | 64 | 16.4 | 104 | 16.4 |
| orientation は CSS のメディア特性で、viewport (またはページメディアではページボックス) の向きを調べるために使用することができます。 | 3 | 12 | 2 | 5 | 18 | 4.2 |
| width は CSS のメディア特性で、viewportの幅（またはページメディアのページボックスの幅）を検査するために使用することができます。 | 1 | 12 | 2 | 3 | 18 | 1 |
| その他 | ||||||
| は CSS のデータ型で、2 つの値の比例関係を表します。主にアスペクト比を表します。これは幅と高さの関係を表します。例えば、 はメディアクエリー @media における aspect-ratio メディア特性の値として、コンテナークエリー @container における aspect-ratio サイズ特性の値として、 CSS aspect-ratio プロパティの値として使用します。 | 3 | 12 | 3.5 | 5 | 18 | 4.2 |
| CSS タイプ | ||||||
number value 実験的 単一の <number> を値として受け入れます。 | | | 78 | | | |
基本構文
@media screen and (min-width: 768px) {
.container { max-width: 720px; }
}
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; }
}ライブデモ
実務での使いどころ
-
レスポンシブレイアウトの実装
画面幅に応じてレイアウトを切り替え、モバイルからデスクトップまで最適な表示を提供します。
注意点
- メディアクエリのブレークポイントはコンテンツに基づいて設定し、特定のデバイスのサイズに依存しないようにしてください。
アクセシビリティ
- prefers-reduced-motionやprefers-color-schemeなどのユーザー設定メディアクエリを活用し、アクセシビリティ設定を尊重してください。