CSSメディア特性主要一覧
CSSメディアクエリで使われる代表的なメディア特性を、分類・値の種類・用途例とあわせて整理した非公開検証用データ。
更新履歴（1回）
- 2026-06-19T20:28:22+09:00 / 20行 / 重複回避CSV生成
列表示ON/OFF
読み込み中...
| feature | category | value_type | meaning_ja | example | note |
|---|---|---|---|---|---|
| width | viewport | length/range | 表示領域の幅に応じて条件分岐する | @media (min-width: 768px) | レスポンシブレイアウトで頻用 |
| height | viewport | length/range | 表示領域の高さに応じて条件分岐する | @media (max-height: 600px) | 縦方向の制約が強い画面向け |
| aspect-ratio | viewport | ratio/range | 表示領域の幅と高さの比率で条件分岐する | @media (min-aspect-ratio: 16/9) | 横長・縦長レイアウトの切替に使う |
| orientation | viewport | keyword | 表示領域の向きで条件分岐する | @media (orientation: portrait) | portraitまたはlandscape |
| resolution | output-device | resolution/range | 出力デバイスの解像度で条件分岐する | @media (min-resolution: 2dppx) | 高密度ディスプレイ向け画像切替など |
| hover | input | keyword | 主入力装置が要素上でホバー可能かを判定する | @media (hover: hover) | hoverまたはnone |
| any-hover | input | keyword | 利用可能な入力装置のいずれかがホバー可能かを判定する | @media (any-hover: hover) | 複数入力デバイス環境を考慮 |
| pointer | input | keyword | 主入力装置のポインティング精度を判定する | @media (pointer: coarse) | none/coarse/fine |
| any-pointer | input | keyword | 利用可能な入力装置のいずれかのポインティング精度を判定する | @media (any-pointer: fine) | タッチとマウス併用環境向け |
| prefers-color-scheme | user-preference | keyword | ユーザーが明色または暗色配色を希望しているかを判定する | @media (prefers-color-scheme: dark) | lightまたはdark |
| prefers-reduced-motion | user-preference | keyword | ユーザーが動きの少ない表示を希望しているかを判定する | @media (prefers-reduced-motion: reduce) | アニメーション抑制に使う |
| prefers-contrast | user-preference | keyword | ユーザーがコントラスト設定を希望しているかを判定する | @media (prefers-contrast: more) | more/less/custom/no-preferenceなど |
| prefers-reduced-transparency | user-preference | keyword | ユーザーが透明効果の低減を希望しているかを判定する | @media (prefers-reduced-transparency: reduce) | 対応状況はブラウザにより差がある |
| forced-colors | user-preference | keyword | ユーザーエージェントが強制色モードを有効化しているかを判定する | @media (forced-colors: active) | アクセシビリティ向け配色調整 |
| color-gamut | output-device | keyword | 出力デバイスが対応する色域を判定する | @media (color-gamut: p3) | srgb/p3/rec2020 |
| display-mode | environment | keyword | Webアプリの表示モードを判定する | @media (display-mode: standalone) | browser/standalone/fullscreenなど |
| update | output-device | keyword | 出力デバイスが表示内容を更新できる頻度を判定する | @media (update: fast) | none/slow/fast |
| overflow-block | environment | keyword | ブロック方向に表示領域を超えた内容の扱いを判定する | @media (overflow-block: scroll) | none/scroll/pagedなど |
| overflow-inline | environment | keyword | インライン方向に表示領域を超えた内容の扱いを判定する | @media (overflow-inline: scroll) | 主に横方向のオーバーフロー特性 |
| inverted-colors | user-preference | keyword | 表示色が反転されているかを判定する | @media (inverted-colors: inverted) | invertedまたはnone |