応用情報技術者 2024年 秋期 午前2 問50
問題文
レスポンシブWebデザインを実現するに当たって、単一の HTML文書を用いてWebコンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用する機能はどれか。
選択肢
ア：User-Agent
イ：WebSocket
ウ：マッシュアップ
エ：メディアクエリ（正解）
レスポンシブWebデザインを実現する機能は何か【午前2 解説】
要点まとめ
- 結論：レスポンシブWebデザインでは、メディアクエリを使い画面サイズに応じた表示を実現します。
- 根拠：メディアクエリはCSSの機能で、端末の画面幅や解像度に応じてスタイルを切り替え可能です。
- 差がつくポイント：User-Agent判別ではなく、画面の特性に基づくスタイル変更がレスポンシブの本質です。
正解の理由
レスポンシブWebデザインは単一のHTML文書で多様な端末に対応する技術です。
メディアクエリはCSSで画面幅や解像度、向きなどの条件を指定し、適切なスタイルを適用できるため、画面サイズに合わせたレイアウト調整が可能です。
これによりスマートフォンやタブレット、PCなど異なるディスプレイで最適な表示が実現します。
メディアクエリはCSSで画面幅や解像度、向きなどの条件を指定し、適切なスタイルを適用できるため、画面サイズに合わせたレイアウト調整が可能です。
これによりスマートフォンやタブレット、PCなど異なるディスプレイで最適な表示が実現します。
よくある誤解
User-Agentで端末を判別して表示を変える方法は古く、メンテナンス性や拡張性に劣ります。
WebSocketやマッシュアップは通信やサービス統合の技術であり、画面表示の調整には関係ありません。
WebSocketやマッシュアップは通信やサービス統合の技術であり、画面表示の調整には関係ありません。
解法ステップ
- 問題文の「単一のHTML文書で各種端末に対応」と「ディスプレイの大きさに合わせる」に注目する。
- 表示を切り替える技術としてCSSの機能を思い出す。
- 選択肢の中でCSSのスタイル切替に使う「メディアクエリ」を選ぶ。
- 他の選択肢の役割を確認し、画面サイズ調整に直接関係しないことを確認する。
選択肢別の誤答解説
- ア: User-Agent
端末の種類を判別するHTTPヘッダーですが、画面サイズに応じたスタイル変更はできません。 - イ: WebSocket
双方向通信を実現する技術で、画面表示の調整とは無関係です。 - ウ: マッシュアップ
複数のWebサービスを組み合わせる手法で、レスポンシブデザインとは関係ありません。 - エ: メディアクエリ
CSSで画面幅や解像度に応じてスタイルを切り替え、レスポンシブWebデザインを実現します。
補足コラム
メディアクエリはCSS3で導入され、
例えば、スマートフォン向けには
これにより、HTMLは共通でCSSだけを切り替え、効率的な開発が可能になります。
@mediaルールを使って条件を指定します。
例えば、スマートフォン向けには
max-width: 600pxの条件でスタイルを変えることが一般的です。
これにより、HTMLは共通でCSSだけを切り替え、効率的な開発が可能になります。
FAQ
Q: User-Agentで画面サイズを判別できないのですか？
A: User-Agentは端末の種類を示す文字列で、画面サイズの情報は含まれません。画面サイズはメディアクエリで判別します。
A: User-Agentは端末の種類を示す文字列で、画面サイズの情報は含まれません。画面サイズはメディアクエリで判別します。
Q: メディアクエリはJavaScriptと併用する必要がありますか？
A: 基本的にはCSSだけで画面サイズに応じたスタイル変更が可能ですが、複雑な動的制御にはJavaScriptを使うこともあります。
A: 基本的にはCSSだけで画面サイズに応じたスタイル変更が可能ですが、複雑な動的制御にはJavaScriptを使うこともあります。
関連キーワード: レスポンシブWebデザイン、メディアクエリ、CSS, 画面サイズ、Web開発、フロントエンド
\ せっかくなら /
応用情報技術者を
クイズ形式で学習しませんか？
クイズ画面へ遷移する→
すぐに利用可能！