メディアクエリ
メディアクエリは、デバイスの種類や特性に応じて切り替えることができる仕組みです。
CSS で使用すれば、特定の種類のデバイスのみに適用したいスタイルを定義したり、ある条件、例えばデバイスの画面サイズが指定のサイズより小さかった場合に適用するスタイルを定義したりと言うことが可能です。
メディアクエリは、デバイスの種類を定義した「メディアタイプ（Media Types）」とデバイスの特性を定義した「メディア特性（Media Features）」に分類され、それら単体、もしくは組み合わせで指定可能です。また、not and only あるいは or といったメディアクエリ修飾子を使用することで複数のメディアクエリを組み合わせた指定も可能になっています。
メディアタイプの種類
CSS2.1 および Media Queries Level 3 では下記以外にも様々なメディアタイプが定義されていましたが、Media Queries Level 4 以降は下記の 3 種類のみの使用が推奨されています。
| キーワード | デバイスの種類 |
|---|---|
| all | すべてのデバイス |
| プリンタや、ブラウザの「印刷プレビュー」など | |
| screen | print に合致しないすべてのデバイス |
メディア特性の種類
Media Queries Level 4、および Level 5 で新たに定義されたメディア特性も紹介しますが、どちらも現時点では正式に勧告された仕様ではありませんし、メディア特性によってはブラウザのサポート状況にばらつきがありますので注意してください。
| キーワード | 説明 |
|---|---|
| any-hover | 入力メカニズムの中に要素上でのホバーを使用することができるものが含まれているか。@media (any-hover: hover) でホバーが使用可能なデバイスにマッチ。 |
| any-pointer | 入力メカニズムの中にポインティングデバイスが含まれているか。@media (any-pointer: none) とすれば、ポインティングデバイスを持たないデバイスにマッチ。 |
| aspect-ratio | ビューポートの幅対高さのアスペクト比を指定。min-aspect-ratio、max-aspect-ratio も使用可能。@media (aspect-ratio: 1/1) と指定すればアスペクト比が 1:1 のデバイスにマッチ。 |
| color | 出力デバイスの色成分あたりの色のビット数を指定（max-color、min-color も使用可能）。カラー出力でなければ値は 0 なので @media (color) と指定すればすべてのカラー出力デバイスにマッチ。 |
| color-gamut | ブラウザやデバイスが対応しているおよその色の範囲。@media (color-gamut: srgb) と指定すれば、sRGB 色空間、もしくはそれより広い色に対応しているデバイスにマッチ。 |
| color-index | デバイスが参照するカラーインデックスの項目数を指定。デバイスがカラーインデックスを参照していない場合は 0。 |
| display-mode | ウェブアプリケーションの表示モードを指定。@media (display-mode: fullscreen) と指定すればフルスクリーンモードにマッチ。 |
| dynamic-range | 出力デバイスで 高ダイナミックレンジがサポートされているかを検出します。@media (dynamic-range: high) で高ダイナミックレンジ対応を検出します。 |
| environment-blending | ディスプレイ技術を検出します。 |
| forced-colors | ブラウザが強制カラーモードを有効にしているかを検出します。@media (forced-colors: active) で強制カラーモードが有効な場合にマッチ。 |
| grid | デバイスがグリッドベースの画面を使用しているかを検出します。通常のパソコンやスマートフォンの画面はビットマップ画面です。@media (grid: 1) がグリッドベース画面にマッチします。 |
| height | ビューポートの高さを <length> 値で指定します。min-height、max-height も使用可能です。 |
| horizontal-viewport-segments | 横方向における表示領域の区分数を検出します。例えば折り曲げ可能なディスプレイを持つデバイスなどで画面が分割されている場合などが当てはまります。 |
| hover | 主要な入力メカニズムが、要素上でのホバーを使用することができるか。 |
| inverted-colors | ブラウザや OS が色反転を使用しているかを検出します。@media (inverted-colors: inverted) で反転されている状態にマッチ。 |
| monochrome | モノクロ出力デバイスを検出します。 |
| nav-controls | ブラウザがナビゲーションを提供しているかを検出します。 |
| orientation | ビューポートの向き。@media (orientation: landscape) で横長、@media (orientation: portrait) で縦長にマッチします。 |
| overflow-block | ビューポートをブロック軸方向にあふれたコンテンツをデバイスがどのように表示するか。@media (overflow-block: scroll) でスクロール表示される場合にマッチ。 |
| overflow-inline | ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか。@media (overflow-inline: scroll) でスクロールできる場合にマッチ。 |
| pointer | 主要な入力メカニズムが、ポインティングデバイスであるか。 |
| prefers-color-scheme | ユーザーが選択しているカラーモード（ライトモードやダークモード）を検出。@media (prefers-color-scheme: dark) でダークモードにマッチ。 |
| prefers-contrast | ユーザーがハイコントラストモードを選択しているかを検出。 |
| prefers-reduced-data | ユーザーがページが読み込むデータ量を抑制するように要求しているかを検出。 |
| prefers-reduced-motion | ユーザーがアニメーションなど動きの量を最小限に抑えるように要求したかどうかを検出します。@media (prefers-reduced-motion: reduce) でユーザーがそのような要求をしている場合にマッチ。 |
| prefers-reduced-transparency | ユーザーが透明度の変化を最小限に抑えるように要求したかどうかを検出します。。@media (prefers-reduced-transparency: reduce) でユーザーがそのような要求をしている場合にマッチ。 |
| resolution | デバイスのピクセル密度。min-resolution、max-resolution も使用可能です。@media (min-resolution: 72dpi) と指定すれば、ピクセル密度が 72dpi 以上のデバイスにマッチします。 |
| scan | 「インターレース」や「プログレッシブ」といった出力デバイスの走査方式を検出します。 |
| scripting | JavaScript などのスクリプト言語がサポートされているかを検出。@media (scripting: enabled) はスクリプト言語が有効な場合にマッチ。 |
| update | デバイスがコンテンツの表示を更新可能な頻度を指定します。例えば電子ブックリーダーなど、画面の更新頻度が低いデバイスにマッチするのが @media (update: slow)。通常のパソコンやスマートフォンの画面など、高頻度で更新可能なデバイ椅子は @media (update: fast) でマッチします。 |
| vertical-viewport-segments | 縦方向における表示領域の区分数を検出します。 |
| width | スクロールバーの幅を含むビューポートの幅を <length> 値で指定します。 min-width、max-width も使用可能です。@media (max-width: 768px) と指定すれば、ビューポートの幅が 768px 以下の場合にマッチ。 |
メディアクエリ修飾子
メディアクエリは、メディアクエリ修飾子を使用することで複数組み合わせることが可能です。キーワードとして not and only or が使用できます。
@media (min-width: 30em) and (max-width: 50em) {
/* and キーワードを使用して、min-width: 30em かつ max-width: 50em の場合にマッチさせた例 */
}
上記の記述は、Media Queries Level 4 で下記のように記述することもできるようになりました。min-width や max-width を使用しなくても同様の記述が可能です。
@media (30em <= width <= 50em) { ... }
not キーワードを使用すると、ある条件と、それ以外、という分岐がわかりやすく記述できます。
@media (min-width: 768px) {
/* 768px 以上の場合にマッチ */
}
@media not (min-width: 768px) {
/* not キーワードを使用して、min-width: 768px 以外、つまり 768px よりも小さい場合にマッチさせた例 */
}
なお、カンマ区切りを使用すると or の扱いになります。
@media (min-width: 980px), screen and (orientation: portrait) {
/* min-width: 980px または、screen に合致するデバイスが縦長モードの場合にマッチさせた例 */
}
Media Queries Level 4 では or キーワードが加わったため、下記のようにも記述することもできます。
@media (min-width: 980px) or screen and (orientation: portrait) { ... }