CSS Reference

メディアクエリ

メディアクエリは、デバイスの種類や特性に応じて切り替えることができる仕組みです。

メディアクエリとは

メディアクエリは、デバイスの種類や特性に応じて切り替えることができる仕組みです。

CSS で使用すれば、特定の種類のデバイスのみに適用したいスタイルを定義したり、ある条件、例えばデバイスの画面サイズが指定のサイズより小さかった場合に適用するスタイルを定義したりと言うことが可能です。

メディアクエリは、デバイスの種類を定義した「メディアタイプ(Media Types)」とデバイスの特性を定義した「メディア特性(Media Features)」に分類され、それら単体、もしくは組み合わせで指定可能です。また、not and only あるいは or といったメディアクエリ修飾子を使用することで複数のメディアクエリを組み合わせた指定も可能になっています。

メディアタイプの種類

CSS2.1 および Media Queries Level 3 では下記以外にも様々なメディアタイプが定義されていましたが、Media Queries Level 4 以降は下記の 3 種類のみの使用が推奨されています。

キーワード デバイスの種類
all すべてのデバイス
print プリンタや、ブラウザの「印刷プレビュー」など
screen print に合致しないすべてのデバイス

メディア特性の種類

Media Queries Level 4、および Level 5 で新たに定義されたメディア特性も紹介しますが、どちらも現時点では正式に勧告された仕様ではありませんし、メディア特性によってはブラウザのサポート状況にばらつきがありますので注意してください。

キーワード 説明
any-hover 入力メカニズムの中に要素上でのホバーを使用することができるものが含まれているか。@media (any-hover: hover) でホバーが使用可能なデバイスにマッチ。
any-pointer 入力メカニズムの中にポインティングデバイスが含まれているか。@media (any-pointer: none) とすれば、ポインティングデバイスを持たないデバイスにマッチ。
aspect-ratio ビューポートの幅対高さのアスペクト比を指定。min-aspect-ratiomax-aspect-ratio も使用可能。@media (aspect-ratio: 1/1) と指定すればアスペクト比が 1:1 のデバイスにマッチ。
color 出力デバイスの色成分あたりの色のビット数を指定(max-colormin-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-heightmax-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-resolutionmax-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-widthmax-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-widthmax-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) { ・・・略・・・ }

補足解説

用語解説など、補足記事を下記にまとめています。