レスポンシブWebデザイン
更新日:
用語解説
レスポンシブWebデザインは、一つのHTMLを基本として、画面幅、向き、入力方式などの端末特性に応じてレイアウトや表示方法を柔軟に変えるWeb設計です。
■ 試験で押さえるポイント
可変グリッド、伸縮する画像、CSSメディアクエリを組み合わせ、スマートフォン、タブレット、PCへ適応します。
端末名ではなくコンテンツが崩れる幅を基準にブレークポイントを設定し、狭い画面では列を縦に並べるなどします。
単に縮小表示するのではなく、文字の読みやすさ、タップ領域、入力方法、画像・通信量、表示順序を調整します。
端末ごとに別URL・別HTMLを用意する方式より管理を一元化しやすい一方、不要な大容量資源を配信しない設計が必要です。
■ 選択肢での判断ポイント
メディアクエリ、可変レイアウト、モバイルファースト、別サイト方式との比較が典型的な出題点です。
例: PCでは商品を3列、狭い画面では1列にし、画像幅を親要素以内へ縮めるページはレスポンシブ設計です。