CSS - @media

• トップ
• CSSリファレンス
• @media

概要

ルール名	@media
構文	@media ( condition ) [and ( condition )]... [, ...] @media media_type [and ( condition )]... [, ...]
サポート	https://caniuse.com/?search=%40media

説明

@media により、スタイルシートを適用する条件を指定することができます。例えば、スマートフォンサイズの場合と、PCディスプレイサイズの場合で、適用するスタイルシートを変更することができます。

メディアタイプ

出力の対象メディアを指定します。下記の例では、em要素を、ディスプレイ(screen)の場合は赤色、印刷(print)の場合は太字で出力します。

@media screen {
  em { color: red; }
}
@media print {
  em { font-weight: bold; }
}

メディアタイプには下記などがあります。screen と print 以外はまだ対応ブラウザは少ないようです。

• all - 下記のすべて
• screen - ディスプレイ
• print - 印刷
• aural - 音声読み上げ
• braile - 点字
• handheld - ハンドヘルド(携帯)
• projection - プロジェクタ
• tty - TTY(固定文字幅端末)
• tv - テレビ
• embossed - 点字 (CSS2)
• speech - 音声 (CSS2)

メディアクエリ

@media に続けて、下記の様な条件を記述することができます。

/* 幅が 767px 以下であれば(最大値が767pxであれば) */
@media (max-width: 767px) { ... }

条件を and で連結することもできます。

/* 幅が 768px以上 1200px以下であれば */
@media (min-width:768px) and (max-width:1200px) { ... }

/* モノクロ印刷であれば */
@media print and (monochrome) { ... }

not で否定にすることもできます。

/* 画面がモノクロでなければ */
@media not (monochrome) { ... }

カンマ(,)は or の意味になります。

/* カラーディスプレイまたはモノクロ印刷であれば */
@media screen and (color), print and (monochrome) { ... }

only はメディア特性に未対応の古いブラウザでスタイルが適用されてしまうのを防ぎます。最近のブラウザでは効果ありません。

@media only screen and (color) { ... }

メディアクエリレンジシンタックス

「720px以上」を「最小値が720px(min-width: 720px)」の様に表すのが分かりづらいというのもあり、最近では下記の書き方もサポートされるようになってきました。(→対応状況)

@media (min-width: 720px) { ... }   /* 最小値が720px＝720px以上 */
@media (720px <= width) { ... }     /* 720px以上 */

@media (min-width: 720px) and (max-width: 1400px) { ... }
@media (720px <= width <= 1400px) { ... }

メディア特性

条件には下記などの属性を指定することができます。(min-/max-) とあるものは、min-width, max-width などのように最少/最大のプレフィックスをつけることができます。

width (min-/max-)

ブラウザの横幅。連続メディアの場合はスクロールバーを含むビューポートの横幅。ページ型メディアの場合はページボックスの横幅。

/* ブラウザの横幅が767px以下であれば */
@media (max-width: 767px) { ... }

height (min-/max-)

ブラウザの高さ。連続メディアの場合はスクロールバーを含むビューポートの高さ。ページ型メディアの場合はページボックスの高さ。

/* ブラウザの高さが500px以下であれば */
@media (max-height: 500px) { ... }

device-width (min-/max-)

デバイスの横幅。連続メディアの場合は画面の横幅。ページ型メディアの場合はページシートの横幅。

/* デバイスの横幅が767px以下であれば */
@media (max-device-width: 767px) { ... }

device-height (min-/max-)

デバイスの高さ。連続メディアの場合は画面の高さ。ページ型メディアの場合はページシートの高さ。

/* デバイスの高さが500px以下であれば */
@media (max-device-height: 500px) { ... }

orientation

ディスプレイが縦長ディスプレイか横長ディスプレイかを portrait(縦長)、landscape(横長) のいずれかで指定します。

/* ディスプレイが縦長であれば */
@media (orientation: portrait) { ... }

aspect-ratio (min-/max-)

ブラウザの縦横比を width/height で指定します。/height を省略した場合は height は 1 と見なされます。IE ではサポートされていません。

/* ブラウザの横幅が縦の2倍以上あれば */
@media (min-aspect-ratio: 2/1) { ... }
@media (min-aspect-ratio: 2) { ... }

device-aspect-ratio (min-/max-)

デバイスの縦横比を width/height で指定します。/height を省略した場合は height は 1 と見なされます。IE ではサポートされていません。

/* デバイスの横幅が縦の2倍以上あれば */
@media (min-device-aspect-ratio: 2/1) { ... }
@media (min-device-aspect-ratio: 2) { ... }

color (min-/max-)

カラーコンポーネントのビット数を指定します。カラーでない場合は 0 を返します。

/* カラーデバイスであれば */
@media (color) { ... }

/* RGB毎に8ビット以上であれば */
@media (min-color: 8) { ... }

color-index (min-/max-)

カラー参照テーブルの項目数。昔の PC 等では画面に一度に表示できる色数に限りがあり、カラー参照テーブルに使用する色情報を登録して使用していました。カラー参照テーブルの機構を使用していない場合は 0 を返します。(→対応状況)

/* カラー参照テーブルが使用され、その色数が256色以下であれば */
@media (color-index) and (max-color-index: 256) { ... }

color-gamut

gamut は色域の意味です。デバイスがどの程度の色域を持っているかを srgb(RGB各8ビット程度)、p3(DCI P3と呼ばれるデジタルシネマ等で使用される色域)、rec2020(BT.2020で勧告される8Kテレビ等で使用される色域)のいずれかで指定します。srgb よりも p3、p3 よりも rec2020 の方がより多彩な色を表現することができます。IE ではサポートされていません。

/* 8Kテレビ並みの色域がサポートされていれば */
@media (color-gamut: rec2020) { ... }

forced-colors

ブラウザが、強制カラーモード(Windowsのハイコントラストモード等)を有効にしているかを active(有効にしている)、none(有効にしていない)のいずれかで指定します。IE ではサポートされていません。

/* 強制カラーモードが有効であれば */
@media (forced-colors: active) { ... }

inverted-colors

ブラウザが色の反転モードにあるか否かを inverted(反転している)、none(反転していない)のいずれかで指定します。まだ一部のブラウザでしかサポートされていません。(→対応状況)

/* 色反転モードであれば */
@media (inverted-colors: inverted) { ... }

monochrome (min-/max-)

白黒デバイスの1ピクセルあたりのビット数。カラー端末の場合は 0。IE ではサポートされていません。

/* モノクロ端末であれば */
@media (monochrome) { ... }

/* モノクロ端末であり、そのビット数が8以下であれば */
@media (monochrome) and (max-monochrome: 8) { ... }

hover

デバイスの第一入力機構が、要素の上でホバーする機構を持っているか否かを hover(持っている)、none(持っていない)のいずれかで指定します。IE ではサポートされていません。

/* 第一入力機構がホバー機構をサポートしていなければ */
@media (hover: none) { ... }

any-hover

デバイスが、要素の上でホバーする機構をひとつでも持っているか否かを hover(持っている)、none(持っていない)のいずれかで指定します。IE ではサポートされていません。

/* ホバー機構をサポートする機構がひとつもなければ */
@media (any-hover: none) { ... }

pointer

デバイスの第一入力機構が、要素をポインティングする機構を持っているか否かを fine(正確性の高い機構を持っている)、coarse(正確性が限定された機構をもっている)、none(持っていない)のいずれかで指定します。IE ではサポートされていません。

/* 第一入力機構がポインティング機構をサポートしていなければ */
@media (pointer: none) { ... }

any-pointer

デバイスが、要素をポインティングする機構をひとつでも持っているか否かを fine(正確性の高い機構を持っている)、coarse(正確性が限定された機構をもっている)、none(持っていない)のいずれかで指定します。IE ではサポートされていません。

/* ポインティング機構をサポートする機構がひとつもなければ */
@media (any-pointer: none) { ... }

resolution (min-/max-)

ディスプレイの解像度(例:96dpi)を指定します。

/* 解像度が96dpi以上であれば */
@media (min-resolution: 96dpi) { ... }

scan

ディスプレイの走査方式を interlace(インターレース方式)、progressive(プログレッシブ方式) のいずれかで指定します。あまりサポートされていないかも。

/* ディスプレイの走査方式がインタレース方式であれば */
@media (scan: interlace) { ... }

grid

TTY や電話ディスプレイなどの固定文字幅グリッド端末であれば 1、さもなくば 0。

/* ディスプレイがグリッド端末であれば */
@media (grid) { ... }

update

デバイスのリフレッシュレートを fast(通常のPCやスマホなどのデバイス)、slow(電子書籍などの遅いデバイス)、none(印刷などリフレッシュしない媒体)のいずれかで指定します。一部のブラウザは対応していません。(→ 対応状況)

/* 電子書籍などのリフレッシュレートが遅い端末であれば */
@media (update: slow) { ... }

overflow-block

ブロック軸方向(通常は縦方向)にあふれたコンテンツをどのように扱うかを none(表示しない)、scroll(スクロールで表示)、paged(ページ送りで表示)、optional-paged(基本的にはスクロールだが break-inside などでページ送りも可能) のいずれかで指定します。まだ一部のブラウザでのみ対応しています。(→対応状況)

/* 縦方向にあふれたコンテンツがページ送りされるのであれば */
@media (overflow-block: page) { ... }

overflow-inline

インライン軸方向(通常は横方向)にあふれたコンテンツをどのように扱うかを none(表示しない)、scroll(スクロールで表示) のいずれかで指定します。まだ一部のブラウザでのみ対応しています。(→対応状況)

/* 縦方向にあふれたコンテンツが表示されないのであれば */
@media (overflow-inline: none) { ... }

>prefers-reduced-motion

利用者がチラチラするアニメーションなどの動きを抑制したがっているか否かを reduce(抑制したがっている)、no-preference(抑制従っていない)のいずれかで指定します。例えば Windows 11 では [設定]-[アクセシビリティ]-[視覚効果]-[アニメーション効果] をオフにすると値は reduce になります。IE ではサポートされていません。

/* アニメーションなどの視覚効果が抑制されていれば */
@media (prefers-reduced-motion: reduce) { ... }

scripting

JavaScript などのスクリプトが有効になっているか否かを enabled(有効)、none(無効)、initial-only(初期化時のみ有効)のいずれかで指定します。まだ、一部のブラウザしか対応していません。(→ 対応状況)

/* スクリプトが無効になっていれば */
@media (scripting: none) { ... }

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/@media
• https://www.w3.org/TR/css-conditional-3/#at-media

---