AP過去問 令和6年度秋期 午前 問50
問50(問題文)
レスポンシブWebデザインを実現するに当たって、単一のHTML文書を用いて、Webコンテンツを各種端末ディスプレイの大きさに合わせた形式で表示するために使用する機能はどれか。
ア User-Agent
イ WebSocket
ウ マッシュアップ
エ メディアクエリ
回答・解説
メディアクエリ(Media Query)
- 概要:
- CSSの機能の一つで、端末の画面サイズや解像度、向きなどに応じて異なるスタイルを適用することができます。これにより、単一のHTML文書で多様な端末（PC、タブレット、スマートフォンなど）に適した表示を実現できます。
- 使用例:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
このコードは、画面幅が600px以下の場合に背景色をライトブルーに変更するスタイルを適用します。レスポンシブデザインの採用はGoogleのSEO(Search Engine Optimaize)においても必要な機能で、小さい画素数の端末向けのWebSiteをきちんと準備しているかで、検索順位にも反映されるものです。
アのUser-Agentは間違いです。Webブラウザや端末がWebサーバに送信するHTTPヘッダの一部で、使用しているブラウザや端末の種類、OSなどの情報を提供します。間違いの理由:User-Agentは端末情報を識別するために使われますが、レスポンシブWebデザインを実現するための直接的な機能ではありません。
イのWebSocketは間違いです。双方向通信を可能にするプロトコルで、リアルタイム通信（チャットアプリやオンラインゲームなど）に利用されます。間違いの理由:WebSocketは通信プロトコルであり、画面のレイアウトやデザインに関する機能ではありません。
ウのマッシュアップは間違いです。複数のサービスやAPIを組み合わせて新しいサービスやコンテンツを作成する技術や手法を指します。間違いの理由:マッシュアップはサービスの統合に関する概念であり、画面デザインや端末対応とは直接関係がありません。
エのメディアクエリは正しいです。CSSで端末の特性に応じて異なるスタイルを適用する仕組み。画面サイズや解像度、向きなどを基に適切なレイアウトを選択できます。正解の理由:単一のHTML文書を使用し、異なるデバイスに適した表示を実現するための中心的な技術であり、レスポンシブWebデザインに欠かせない機能です。
したがって
エ メディアクエリ
が答えです。