Webコンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用する機能｜科目A-1（応用情報技術者） 令和6年 秋期午前試験 問50
出典：令和6年秋期 午前 問50
分野：ソフトウェア開発管理技術 ／ 開発プロセス・ 手法
レスポンシブWebデザインを実現するに当たって，単一のHTML文書を用いて，Webコンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用する機能はどれか。
- ア：User-Agent
- イ：WebSocket
- ウ：マッシュアップ
- エ：メディアクエリ
TSUNAGARU-ADVICE
まず押さえたいこと
レスポンシブWebデザインでは、同じHTMLを使いながら、画面サイズなどの条件に応じてCSSの適用内容を切り替えることで、PCやスマートフォンなどに適したレイアウトを表示します。その条件指定に使われるのがメディアクエリです。
迷ったときの判断軸
User-Agentはブラウザや端末などの情報を示すもの、WebSocketは双方向通信を実現する仕組み、マッシュアップは複数のサービスや情報を組み合わせる考え方です。「画面幅などに応じてCSSを切り替える」ならメディアクエリと判断しましょう。
科目Bにつなげるために
特にプロフェッショナルデジタルスキル（システム）試験合格を目指す方は、レスポンシブWebデザインをHTML・CSS・メディアクエリによるマルチデバイス対応と結び付けて理解しましょう。WebアプリケーションのUI設計やフロントエンド開発にもつながります。
レスポンシブWebデザインでは、PC・タブレット・スマートフォンなど、画面サイズが異なる端末でも単一のHTML文書を使い、表示方法を切り替えます。
このときCSSのメディアクエリを使用すると、画面の幅などの条件に応じて適用するスタイルを変更できます。例えば、画面が狭い場合だけレイアウトを縦並びにするといった指定ができます。
したがって、エが適切です。
メディアクエリの例
@media (条件) { CSS } ❌他選択肢が誤りの理由ア：User-Agent
⇒User-Agentは、ブラウザやOSなどの情報をWebサーバへ伝えるための情報です。画面サイズに応じてCSSを切り替える機能ではありません。
イ：WebSocket
⇒WebSocketは、Webブラウザとサーバの間で双方向通信を継続して行うための通信技術です。レスポンシブWebデザインを実現する機能ではありません。
ウ：マッシュアップ
⇒マッシュアップは、複数のWebサービスやコンテンツを組み合わせて新しいサービスを構築する手法です。画面サイズに応じた表示制御とは異なります。