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

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

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

例題4.5「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
メディアクエリを利用して、表示領域の幅に応じて3段階に背景色を切り替える仕組みを作成する。仕様は幅768ピクセル未満は赤、幅768ピクセルから1024ピクセルは緑、それより大きい場合は青とする。
以下のCSSで、1、2それぞれに入れる指定で適切なものを選択しなさい。
body { background-color: red; } @media screen and (   1   ){ body { background-color: green; } } @media screen and (   2   ){ body { background-color: blue; } }
  • 1:min-width:768px、2:max-width:1024px
  • 1:max-width:768px、2:min-width:1024px
  • 1:min-width:768px、2:min-width:1025px
  • 1:max-width:1024px、2:max-width:767px

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

答え C
レスポンシブWebデザインでデバイスの表示領域に応じてCSSを切り替える場合、モバイル環境(小さい画面)をデフォルトとして設定し、大きな画面用の設定を追加していく形と、デスクトップ環境(大きい画面)をデフォルトとして設定し、小さな画面用の設定を追加していく形があります。
前者をモバイルファースト、後者をデスクトップファーストと呼びます。
問題のCSSではデフォルトのスタイルが赤になっているので、モバイルファーストの考え方で指定を行うことになります。
選択肢Cは、最小範囲が赤で、最低幅768ピクセルの場合が緑、最低幅1025ピクセルの場合が青という指定で、与えられた仕様に適ったものとなります。
選択肢Dはデスクトップファーストの指定になります。3段階に色が変化しますが、サイズと色の組み合わせが仕様と異なるので不適切です。

出題範囲の詳細

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

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

このページの先頭へ