Media queries
レスポンシブWebデザインの基盤となる機能で、画面サイズ、デバイスの種類、ユーザーの設定に応じてスタイルを切り替えます。メディアタイプ（screen、print）とメディア機能（width、prefers-color-scheme等）を組み合わせて、あらゆるデバイスと環境に適応するスタイルを定義できます。
概要
レスポンシブWebデザインの基盤となる機能で、画面サイズ、デバイスの種類、ユーザーの設定に応じてスタイルを切り替えます。メディアタイプ（screen、print）とメディア機能（width、prefers-color-scheme等）を組み合わせて、あらゆるデバイスと環境に適応するスタイルを定義できます。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 3+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
@media screen and (min-width: 768px) {
.container { max-width: 720px; }
}
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; }
}実務での使いどころ
-
レスポンシブレイアウトの実装
画面幅に応じてレイアウトを切り替え、モバイルからデスクトップまで最適な表示を提供します。
注意点
- メディアクエリのブレークポイントはコンテンツに基づいて設定し、特定のデバイスのサイズに依存しないようにしてください。
アクセシビリティ
- prefers-reduced-motionやprefers-color-schemeなどのユーザー設定メディアクエリを活用し、アクセシビリティ設定を尊重してください。