応用情報技術者試験 応用情報技術者試験 令和6年度秋期 午前 問50: レスポンシブ Web デザインを実現するに当たって，単一の HTML 文書を用いて，Web コンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するた

問題本文

レスポンシブ Web デザインを実現するに当たって，単一の HTML 文書を用いて，Web コンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用する機能はどれか。

選択肢

• ア.User-Agent
• イ.WebSocket
• ウ.マッシュアップ
• エ.メディアクエリ

正解

エ. メディアクエリ

解説

レスポンシブ Web デザインは、単一の HTML をもとに、表示する端末の画面幅などに応じて CSS でレイアウトを切り替える設計手法である。これを実現するのが CSS のメディアクエリで、画面の幅や解像度といった条件を判定して適用するスタイルを切り替えられる。したがってメディアクエリとしたエが正解となる。

選択肢ごとの解説

• ア.User-Agent はブラウザや OS の種類を示す HTTP ヘッダー情報であり、サーバ側で端末を判別する用途には使えるが、単一 HTML を画面幅に合わせて表示するレスポンシブの中核機能ではないため誤り。
• イ.WebSocket はサーバとブラウザ間で双方向の常時通信を行うための仕組みであり、画面サイズに合わせた表示とは無関係なので誤り。
• ウ.マッシュアップは複数のサービスや API を組み合わせて新しいサービスを作る手法であり、画面サイズへの対応とは無関係なので誤り。
• エ.正しい。メディアクエリは画面幅などの条件に応じて適用する CSS を切り替える機能で、レスポンシブ Web デザインの実現に用いられる。