メディアクエリ
出典: 令和6年度 秋期 応用情報技術者試験 午前 問50 (IPA)
レスポンシブ Web デザインを実現するに当たって，単一の HTML 文書を用いて，Web コンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用する機能はどれか。
- ア User-Agent
- イ WebSocket
- ウ マッシュアップ
- エ メディアクエリ
正解と解説を見る
正解: エ
- ア: User-Agent はブラウザの種類などをサーバに伝える情報です。これで出し分けると、端末ごとに別の HTML になりがちです。
- イ: WebSocket は、ブラウザとサーバの間で双方向の通信を続ける仕組みです。
- ウ: マッシュアップは、複数の Web サービスの機能を組み合わせて新しいサービスを作ることです。
- エ: 画面の大きさに応じて CSS を切り替えるメディアクエリが、レスポンシブ Web デザインに使われるので正しい答えです。
ポイント
- メディアクエリ: CSS で「画面の幅が ○○px 以下なら、このスタイルを使う」のように、画面の大きさなどの条件でスタイルを切り替える機能です。
- 1 つの HTML のまま、PC とスマートフォンで見た目を変えられるので、レスポンシブ Web デザインに使われます。