メディアクエリについて
メディアクエリとは、メディアタイプとメディア特性を使用して、対象とするデバイスを指定する機能のことです。
基本的な書式は次のようになります。
media="screen and (min-width: 640px)"
screen の部分がメディアタイプ、and が演算子、min-width: 640px がメディア特性です。（メディア特性は ( ) の中に記述する必要があります）
メディアタイプでデバイスの大まかな種類を指定して、メディア特性で細かい条件を指定することになります。
メディアクエリはCSSの@media規則などで利用できるほか、このページで紹介するmedia属性を使用して指定することができます。
メディアタイプの一覧
以下のメディアタイプが定義されています。
| メディアタイプ | 説明 |
|---|---|
all |
すべてのデバイスに一致 |
print |
プリンタや印刷プレビューに一致 |
screen |
print 以外のすべてのデバイスに一致（PCやスマートフォンなどのディスプレイ） |
tty、tv、projection、handheld、braille、embossed、aural、speechといったメディアタイプは非推奨となりました。- メディアタイプを省略した場合は
allが適用されます。（ただし、not演算子やonly演算子を使用する場合はメディアタイプを指定しなければなりません）
メディアタイプだけで指定する場合は次のようになります。
media="screen"
上記の指定では、メディアタイプが screen となるデバイスを対象にしています。
メディア特性の一覧
以下のメディア特性が定義されています。（ ）内は値に関する説明です。
| メディア特性 | 範囲 | 説明 |
|---|---|---|
width |
○ | ビューポートの幅（長さ） ※ビューポートとは、スクロールバーを含めたブラウザの表示領域のこと |
height |
○ | ビューポートの高さ（長さ） |
aspect-ratio |
○ | ビューポートのアスペクト比（ 1/1 など） |
orientation |
× | ビューポートの向き（ portrait 縦長｜landscape 横長） |
overflow-block |
× | ブロック軸方向にあふれたコンテンツをどう扱うか（ none 表示されない｜scroll スクロールで表示される｜paged 個別のページに分割して表示される）※ブロック軸とは、横書きの時は縦軸、縦書きの時は横軸のこと |
overflow-inline |
× | インライン軸方向にあふれたコンテンツをどう扱うか（ none 表示されない｜scroll スクロールで表示される）※インライン軸とは、横書きの時は横軸、縦書きの時は縦軸のこと |
horizontal-viewport-segments |
○ | 水平方向のビューポートの論理区分の数（整数） ※垂直状態のデュアルスクリーンの場合は 2 になる |
vertical-viewport-segments |
○ | 垂直方向のビューポートの論理区分の数（整数） ※水平状態のデュアルスクリーンの場合は 2 になる |
display-mode |
× | Webアプリケーションの表示モード（ fullscreen 表示領域全体に表示｜standalone スタンドアロン的に表示｜minimal-ui 最小限のナビゲーションUIを表示｜browser タブや新規ウィンドウで表示） |
resolution |
○ | デバイスの解像度（ dpi、dpcm、dppx などの単位で指定｜infinite 無限） |
scan |
× | デバイスの走査方式（ progressive プログレッシブ｜interlace インターレース） |
grid |
× | デバイスがグリッドベースの画面であるかどうか（ 1 グリッドである｜0 グリッドではない（ビットマップである）） |
update |
× | デバイスがどれだけの頻度でコンテンツの表示を更新できるか（ none 更新できない｜slow ゆっくりと更新できる｜fast 素早く更新できる）※ none は印刷時など、slow は電子書籍リーダーなど、fast はコンピューター画面など |
environment-blending |
× | ディスプレイが現実の風景にコンテンツを重ねるかどうか（ opaque 不透明な背景に表示｜additive 風景に加色混合で表示｜subtractive 風景に減色混合で表示）※拡張現実（AR）やヘッドアップディスプレイなどを想定したもの |
color |
○ | デバイスのカラーコンポーネントあたりのビット数（整数） ※カラーでない場合は 0 |
color-index |
○ | デバイスのカラールックアップテーブルの項目数（整数） ※使用していない場合は 0 |
monochrome |
○ | モノクロデバイスのピクセルあたりのビット数（整数） ※モノクロでない場合は 0 |
color-gamut |
× | デバイスが対応しているおおよその色の範囲（ srgb sRGB色域以上に対応｜p3 DCI P3色空間以上に対応｜rec2020 Rec. 2020色域以上に対応） |
dynamic-range |
× | デバイスが対応しているダイナミックレンジ（ high 高ダイナミックレンジに対応｜standard 標準以上のダイナミックレンジに対応）※ high に一致するデバイスは standard にも一致する |
inverted-colors |
× | デバイスの機能によって色が反転されているかどうか（ none 反転されていない｜inverted 反転されている）※iOSの場合：設定 → アクセシビリティ → 画面表示とテキストサイズ → 反転（スマート） |
pointer |
× | デバイスの主要な入力装置がポインティングデバイスであるかどうか（ none ポインティングデバイスではない｜coarse 精度の低いポインティングデバイスである｜fine 正確なポインティングデバイスである）※タッチスクリーンなどは coarse、マウスなどは fine |
hover |
× | デバイスの主要な入力装置が要素上でホバーできるかどうか（ none ホバーできない｜hover ホバーできる）※タッチスクリーンなどは none、マウスなどは hover |
any-pointer |
× | デバイスにポインティングデバイスがあるかどうか（ none ポインティングデバイスがない｜coarse 精度の低いポインティングデバイスがある｜fine 正確なポインティングデバイスがある） |
any-hover |
× | デバイスに要素上でホバーできる入力装置があるかどうか（ none ホバーできる入力装置がない｜hover ホバーできる入力装置がある） |
nav-controls |
× | ブラウザが明確なナビゲーションコントロールを提供しているかどうか（ none 提供しておらず、特に戻るボタンがない｜back 提供しており、少なくとも戻るボタンがある） |
video-color-gamut |
× | デバイスのビデオプレーンが対応しているおおよその色の範囲（ srgb sRGB色域以上に対応｜p3 DCI P3色空間以上に対応｜rec2020 Rec. 2020色域以上に対応） |
video-dynamic-range |
× | デバイスのビデオプレーンが対応しているダイナミックレンジ（ high 高ダイナミックレンジに対応｜standard 標準以上のダイナミックレンジに対応）※ high に一致するデバイスは standard にも一致する |
scripting |
× | JavaScriptなどのスクリプトが利用できるかどうか（ none 利用できない｜initial-only 文書の読み込み中にのみ利用できる｜enabled 利用できる） |
prefers-reduced-motion |
× | ユーザーがアニメーションの量を最小化するように設定しているかどうか（ no-preference 設定していない｜reduce 最小化するように設定している） |
prefers-reduced-transparency |
× | ユーザーが透明度の効果の量を最小化するように設定しているかどうか（ no-preference 設定していない｜reduce 最小化するように設定している） |
prefers-contrast |
× | ユーザーがコントラストの増減を設定しているかどうか（ no-preference 設定していない｜less 低くなるように設定している｜more 高くなるように設定している｜custom 特定色の組み合わせを設定している） |
forced-colors |
× | 強制カラーモードが有効になっているかどうか（ none 無効になっている｜active 有効になっている） |
prefers-color-scheme |
× | ライトモードとダークモードのどちらになっているか（ light ライトモードになっている｜dark ダークモードになっている）※ライトモードは明るい背景に暗いテキスト、ダークモードは暗い背景に明るいテキスト、デフォルトはライトモード |
prefers-reduced-data |
× | ユーザーがデータ使用量を削減するように設定しているかどうか（ no-preference 設定していない｜reduce 削減するように設定している） |
- ブラウザが未対応のメディア特性も多いため、対応状況を調べた上で使用するようにしてください。
device-width、device-height、device-aspect-ratioといったメディア特性は非推奨となりました。- とりあえず
widthを覚えておけば、ある程度のことはできると思います。
範囲の列に ○ が付いているメディア特性は、特性名の前に接頭辞（min- と max-）を付けることができます。
min-- 最小値を表します。～以上という条件を指定したい場合に使用します。
max-- 最大値を表します。～以下という条件を指定したい場合に使用します。
次の例では、width 特性に min- を付けて横幅の最小値を指定しています。
media="screen and (min-width: 640px)"
上記の指定では、メディアタイプが screen で、かつビューポートの幅が640px以上のデバイスを対象にしています。
演算子
and 演算子
and 演算子を使うことで、複数の条件を連結することができます。
次の例では、and を使って3つの条件を設定しています。
media="screen and (min-width: 600px) and (max-width: 1000px)"
上記の指定は、メディアタイプが screen で、かつビューポート横幅が600px以上、かつ1000px以下のデバイスを対象としています。
andで連結した場合は、すべての条件に一致するデバイスを対象にすることができます。
カンマ区切り
メディアクエリは、カンマ（ , ）で区切ってリスト化することもできます。
次の例では、2つのメディアクエリをリスト化しています。
media="(max-width: 420px), (orientation: portrait)"
上記の指定は、ビューポートの横幅が420px以内、またはビューポートの向きが縦長のデバイスを対象としています。
,でリスト化した場合は、条件のうち1つ以上に一致したデバイスを対象にすることができます。
上記は次のように記述することもできます。（all and を加えています）
media="all and (max-width: 420px), all and (orientation: portrait)"
not 演算子
メディアクエリの先頭に not 演算子を入れると、その条件に一致しないデバイスを対象にすることができます。
media="not all and (max-width: 420px)"
上記の指定は、ビューポートの横幅が420px以内ではないデバイスを対象にしています。（つまり、横幅が421px以上のデバイスを対象にしている、ということになります）
only 演算子
メディアクエリの先頭に only 演算子を入れると、メディアクエリに対応していない古いブラウザを除外することができます。
media="only screen and (min-width: 600px)"
上記の場合、メディアクエリに対応しているブラウザであれば、only はスキップされてそれ以降のメディアクエリが処理されます。メディアタイプにしか対応していないブラウザでは、only という演算子が認識できずこの処理は中断されることになります。
比較演算子
Media Queries Level 4以降では、範囲の指定に比較演算子を使えるようになりました。
- ただし、この指定方法に対応しているブラウザはまだ少ないようです。（2022年7月現在）
例えば、接頭辞を使って300px以上を指定する場合は次のようになりますが、
media="(min-width: 300px)"
比較演算子を使うと次のように記述することができます。
media="(width >= 300px)"
また、300px以上～600px以下といった指定を行いたい場合は、
media="(min-width: 300px) and (max-width: 600px)"
上記を次のように記述することができます。
media="(300px <= width <= 600px)"
比較演算子の指定を接頭辞の指定に置き換えると次のようになります。
| 比較演算子 | 指定内容 | 接頭辞 |
|---|---|---|
(width >= 300px) |
300px以上 | (min-width: 300px) |
(width > 300px) |
300pxより大きい | (min-width: 301px) |
(width <= 600px) |
600px以下 | (max-width: 600px) |
(width < 600px) |
600pxより小さい | (max-width: 599px) |
(300px <= width <= 600px) |
300px以上～600px以下 | (min-width: 300px) and (max-width: 600px) |
メディアクエリのサンプル
使いそうな？メディアクエリのサンプルです。（値の数値は必要に応じて書き換えてください）
- ビューポートの幅 （500px以上）
-
表示領域が広いブラウザ用。
media="screen and (min-width: 500px)" - ビューポートの幅 （500px以下）
-
表示領域が狭いブラウザ用。
media="screen and (max-width: 500px)" - ビューポートの幅と向き （700px以下で横長）
-
スマホの横向き用。
media="screen and (max-width: 700px) and (orientation: landscape)" - ビューポートの幅と向き （500px以下で縦長）
-
スマホの縦向き用。
media="screen and (max-width: 500px) and (orientation: portrait)" - デバイスの解像度 （300dpi以上）
-
高画素密度のディスプレイ用。
media="screen and (min-resolution: 300dpi)" - 印刷 （プリンタでカラーデバイス）
-
カラー印刷用。
media="print and (color)"
省略
特性値の省略
指定内容によっては、メディア特性の値を省略できる場合があります。
例えば、次の2つのメディアクエリは、どちらも同じ条件を指定していることになります。（カラーデバイスを対象にしています）
media="all and (color)"
media="all and (min-color: 1)"
値が 0 でないことだけを表す場合は、上記のように特性名だけで指定することができます。
- ただし、
min-/max-を付けている場合は、値を必ず指定しなければなりません。
メディアタイプの省略
メディアタイプにすべてのデバイスを指定する場合は、その値となる all を省略することができます。
例えば、次の2つのメディアクエリは、どちらも同じ条件を指定していることになります。
media="(min-width: 500px)"
media="all and (min-width: 500px)"
- メディアタイプを省略する場合は、その後に続く
andも省略しておきます。