メディアクエリ

メディアクエリは、画面幅、向き、解像度、色設定、利用者の動き軽減設定などの条件に応じてCSSを適用する仕組みです。レスポンシブWebデザインを実現する主要技術です。

■ 試験で押さえるポイント

• CSSの@media規則などで条件を指定し、条件成立時だけ列数、文字サイズ、表示方法を変更します。

• 端末機種を直接判定するのではなく、コンテンツに必要な表示領域や利用者設定を条件にすることで未知の端末にも適応しやすくなります。

• 狭い画面向けを基本にし、幅が広がる条件で機能・配置を追加するモバイルファースト設計があります。

■ 選択肢での判断ポイント

メディアクエリとレスポンシブ設計の関係、ブレークポイント、アクセシビリティ向け設定条件を理解します。

例: 画面幅が768px以上なら2列、未満なら1列にするCSS条件はメディアクエリで指定できます。