令和8年度 ITパスポート試験 公開問題 問60 解説 レスポンシブWebデザイン
レスポンシブWebデザインに関する記述として,適切なものはどれか。
- ア PC,スマートフォンなど,多くの種類の端末で,見やすく,かつ操作しやすくなるように,表示する端末の画面サイズなどに応じてWebサイトの画面レイアウトが変化する。 ✓ 正答
- イ Webブラウザで動画コンテンツをストリーミング再生するとき,サーバやネットワークの負荷が軽減されるように,複数のコンテンツ配信サーバのうち,利用者に適したサーバに接続させてデータを取得する。
- ウ スマートフォンなどの端末向けのWebアプリケーションにおいて,歩数や移動速度などを計測できるように,端末に内蔵された加速度センサーやジャイロセンサーのデータを使用する。
- エ 操作説明書を読まなくてもWebサイトの使用方法を理解できるように,Webブラウザの利用者がマウスポインタをWebコンテンツに重ねたとき,ポップアップを用いて機能の説明,対象の状態などを表示する。
解説
レスポンシブWebデザインとは、ひとつのWebサイトを複数の端末(PC、スマホ、タブレットなど)で最適に表示させる技術のことです。選択肢アにある通り、画面サイズに応じてレイアウトが自動的に変化する仕組みを指します。
レスポンシブWebデザインの仕組み
Webサイトの見た目は主にHTML(骨組み)とCSS(デザイン)で構成されます。レスポンシブWebデザインでは、同じHTMLファイルを使用しながら、CSSにメディアクエリという条件分岐の指示を書き込みます。
例えば、画面幅が768ピクセル以上のときは3列で表示し、それより狭いときは縦に並べる、といった指定を行います。これにより、URLを端末ごとに分ける必要がなくなり、情報の更新や管理が効率的になるという大きなメリットがあります。
現代のWeb開発で必須の知識
なぜこの技術が重要なのかというと、現代では非常に多くの種類のデバイスが混在しているからです。スマホひとつとっても画面の大きさは千差万別であり、タブレットやPCの画面サイズも多様です。これらすべてに対して個別にサイトを用意するのはコストが非常に高くつきます。
この知識は、Webディレクターやエンジニアだけでなく、Webサイトを活用する企画職にとっても重要です。例えば、サイト制作の発注時に「レスポンシブ対応でお願いします」と伝えるだけで、保守運用にかかるコストを劇的に抑えることが可能になります。
他の選択肢についての解説
試験対策として、不正解の選択肢が何を指しているかも押さえておきましょう。
イはCDN(コンテンツデリバリネットワーク)の説明です。動画配信など、大量のデータ通信が発生する際に、利用者に近いサーバからデータを配信することで負荷を分散させる技術です。
ウは、スマートフォンなどの端末に搭載されたセンサーを活用する機能の説明です。WebアプリケーションのAPIを通じて、端末の傾きや位置情報を取得し、ゲームやフィットネスアプリなどで活用されます。
エはツールチップの説明です。ユーザーがアイコンやボタンにマウスを重ねた際に、補足説明を表示するUI(ユーザーインターフェース)デザインの手法です。これらはすべて、Webの利便性を高めるための異なる技術分野です。