• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル1 サンプル問題

1.4 レスポンシブウェブデザイン に関する問題

例題4.13 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
フルードグリッドの特徴として正しくないものを選択してください。
  • グリッド幅、グリッドの数をウインドウ幅に合せて変更する
  • メディアクエリーを使用してCSSを切り替える
  • グリッド幅を相対値で指定する
  • 画像の大きさをウインドウ幅に合せて変更する
  • かならずしもJavaScriptを必要としない

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

正解 D
レスポンシブWebデザインで良く使用される、フルードグリッドに関する問題です。
ウィンドウ幅に合せて流動的にデザインを変更するリキッドレイアウトと、ウィンドウもしくはコンテンツ領域をいくつかのグリッドと呼ばれる領域に分割してレイアウトの基準とするグリッドシステムを合せたものをフルードグリッドと呼びます。
フルードグリッドでは、画像の大きさについては明示的に扱いません。ウィンドウ幅に合せて変更する技術はフルードイメージと呼ばれます。
従ってフルードグリッドの特徴として、D.は正しくありません。
その他の選択肢については、以下の通りです。
A. 通常のグリッドシステムでは、グリッド幅やグリッドの分割数は固定ですが、フルードグリッドでは、幅、数ともにウィンドウ幅に合せて変化します。
B. グリッドの数の切り替えには、CSSのメディアクエリーを使って指定します。
C. グリッドの幅をウィンドウ幅に合せて変化させるためには、グリッド幅を相対値で指定します。
E. JavaScriptを使って実現することもできますが、CSSだけでも実現可能です。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

このページの先頭へ