令和6年秋期試験問題 午前問50
問50解説へ
レスポンシブWebデザインを実現するに当たって，単一のHTML文書を用いて，Webコンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用する機能はどれか。
- User-Agent
- WebSocket
- マッシュアップ
- メディアクエリ
広告
解説
- User-Agentは、WebブラウザがWebサーバに伝える情報で、ユーザーが利用する端末、Webブラウザ、OSの種類やバージョンを識別するためのものです。User-Agentでデスクトップとスマートフォンを判別し、それに応じたHTML文書を出し分けるスマホ対応もありますが、これはレスポンシブWebデザインではありません。Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
- WebSocketは、Webアプリケーションにおいてクライアント（Webブラウザ）とWebサーバとの間で効率的な双方向通信を実現するプロトコルです。主にリアルタイム通信が必要なアプリケーション（チャットやゲームなど）で使われます。
- マッシュアップは、Web上に公開されている様々なWebサービスを組み合わせて、新しいWebサービスを作り出す手法です。
- 正しい。メディアクエリは、CSSの機能のひとつで、デバイスの特性（画面の幅や高さ、解像度、向き）に応じて異なるスタイルを適用することができる仕組みです。同じHTML文書で異なる画面サイズやデバイスに最適化されたレイアウトを提供するレスポンシブWebデザインの中心的な技術です。@media (条件) {
/* 条件が満たされた場合に適用するCSS */
}
body { font-size: 16px; }
/* 画面幅768px以下（主にタブレットやスマートフォン向け）に適用するスタイル */
@media (max-width: 768px) {
body { font-size: 14px; }
}
/* 画面幅480px以下（主にスマートフォン向け）に適用するスタイル */
@media (max-width: 480px) {
body { font-size: 12px; }
}
広告