ITパスポート 2026年 問60

レスポンシブWebデザインに関する記述として、適切なものはどれか。【ITパスポート 解説】

正解の理由

• Webブラウザ：Webページを見るためのソフト（例：Chrome、Safari）。
• サーバ（サービスを提供するコンピュータ）：Webページや動画などのデータを配る側のコンピュータ。

解法ステップ

1. 各選択肢でキーワードを探す。「画面サイズ」「端末」「レイアウト」「操作しやすく」などがレスポンシブの核心。
2. レスポンシブは「レイアウトを端末に合わせて変える」ことを指すと覚える。
3. 他の選択肢が別の技術（配信方式、センサー利用、ポップアップ表示）を説明していないかを確認して除外する。
4. 最終的に「画面サイズに応じてレイアウトが変化する」とある ア を選ぶ。

選択肢別の誤答解説

• ア：正しい。PCやスマートフォンなど多様な画面に対して、表示を自動で最適化する設計（例：グリッド幅を可変にする、画像を縮小する、メディアクエリを使う）。
• イ：誤り。これはCDN（Content Delivery Network：コンテンツ配信ネットワーク）に関する説明です。CDNはユーザに近いサーバからデータを配ることで配信負荷や遅延を下げますが、「画面レイアウトを変える」話ではありません。
• ウ：誤り。端末内の加速度センサー（accelerometer：加速度を測る）やジャイロセンサー（gyroscope：回転を測る）のデータを使う話は、センサ利用やモバイルアプリ／Web APIの話です。レイアウトの自動最適化（レスポンシブ）とは別の話です。
• エ：誤り。マウスポインタを重ねたときに情報を出す「ツールチップ（tooltip）」やポップアップは、ユーザ補助にはなることもありますが、特にレスポンシブの定義ではありません。さらに、タッチ操作の多いスマートフォンでは「マウスポインタのホバー」が使えないため、説明に不適切な点もあります。

よくある誤解

1. レスポンシブ＝ただ縮小するだけ、と思う
   • 単に縮小して小さい文字にするだけでは見やすくなりません。列の並び替え、画像の縮小、メニューの切替（ハンバーガーメニュー化）など、操作性を保つ工夫が必要です。
2. ホバー（マウスを乗せる）で説明を出す機能はスマホでも有効と思う
   • スマートフォンではマウスがないためホバーが使えません。レスポンシブ設計では、タップで情報を出すなどタッチ対応も考慮します。
3. レスポンシブで全ての問題が解決すると思う
   • レスポンシブは表示と操作の最適化に役立ちますが、通信速度改善（CDN）、機能追加（センサー利用）、アクセシビリティ対応などは別の対策が必要です。

補足コラム

• ビューポートの設定（viewport：表示領域をブラウザに伝える仕組み）は必須です。HTMLのheadに次のタグを入れます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• CSSのメディアクエリ（media query：画面条件に応じて適用するルール）例：

/* 幅600px以下の画面にだけ適用 */
@media (max-width: 600px) {
  .header { font-size: 18px; }
  .sidebar { display: none; } /* サイドバーを非表示にして縦レイアウトにする */
}

• 基本設計の考え方：「モバイルファースト」 — 初めにスマホ向けに設計し、画面が広くなる場合にレイアウトを拡張していく手法。小さい画面で必要な情報・操作を優先する考えです。
• テスト方法：ブラウザ（Chrome、Firefox等）の開発者ツールで画面サイズを切り替え、見た目と操作を確認します。

FAQ