DE-K47｜情報Ⅰ 対策問題

正答

1

この問題のポイント

レスポンシブデザイン（画面サイズへの適応） を問う問題です。

解説

レスポンシブは「反応する・応答する」という意味です。レスポンシブデザインは、閲覧している端末の画面の大きさに反応して、Webページのレイアウトを自動で切り替えるデザイン手法です。パソコンでは3列に並んでいた記事が、スマートフォンでは1列に縦に並ぶ、という切り替えが典型例です。

仕組みのポイントは「HTMLは1つのまま」という点です。端末ごとに別々のページを作るのではなく、1つのHTMLに対して、CSSの条件分岐の仕組み(メディアクエリ)で「画面幅が狭いときはこの配置」と表示だけを切り替えます。構造(HTML)と見た目(CSS)を分離しているからこそ可能になる手法です。

目的の面から見ると、スマートフォン・タブレット・パソコンとどの端末からでも快適に情報へアクセスできるようにする工夫であり、アクセシビリティとユーザビリティを高める実践例といえます。

共通テストでは、用語の意味を問う形のほか、「多様な端末に対応するWebサイトの工夫として適切なもの」を選ぶ文脈で出題されます。

選択肢の確認

1．○ 画面サイズに応じてレイアウトを自動で切り替える手法=レスポンシブデザイン。
2．× スケルトンデザインは読み込み中に骨組みを見せる表示手法などを指す。
3．× フラットデザインは立体感や装飾を抑えた見た目の様式で、画面サイズ対応ではない。
4．× タイポグラフィは文字の書体・組み方のデザイン。

ここだけは覚えよう

レスポンシブデザイン=1つのHTML、CSSで画面幅に応じて表示を切り替え — 多端末対応でアクセシビリティ向上。