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

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

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

例題4.11 「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの出題です。
次のようなHTMLとCSSの組み合わせがある場合に、後述する設問に解答しなさい。
【HTML】 <body> <div id="wrap">sample</div> </body> 【CSS】 body, div { margin: 0; padding: 0; } ‪#‎wrap‬ { background-color: ‪#‎FF0000‬; width: 100vmin; height: 100vmin; } @media screen and (max-width: 1024px) and (orientation:landscape) { #wrap { width: 100vmax; height: 100vmin; } } @media screen and (max-width: 480px) and (orientation:portrait) { #wrap { width: 100vmin; height: 100vmax; } }
Webブラウザで表示した際の動作に関する記述で、間違っているものを次の選択肢から1つ選びなさい。
  • Webブラウザの表示領域の幅が400ピクセルのとき、表示領域が縦長でも横長でも背景色は全面赤色で表示される。
  • Webブラウザの表示領域が幅800ピクセル、高さ600ピクセルのとき、div要素は表示領域より幅が大きくなる。
  • Webブラウザの表示領域が幅800ピクセル、高さ1,200ピクセルのとき、下部に400ピクセルの余白ができる。
  • Webブラウザの表示領域が幅1,200ピクセル、高さ1,400ピクセルのとき、下部に200ピクセルの余白ができる。

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

正解 B
例題で使用している単位、vminは表示領域の幅か高さのいずれか小さい方に対するパーセンテージを表し、vmaxは大きい方に対するパーセンテージを表します。
1つめの#wrapセレクタは幅か高さの小さい方のサイズで正方形を作成します。
2つめの#wrapセレクタは幅が1,024ピクセル以下で横長の場合に全面を覆う長方形を作成します。
3つめの#wrapセレクタは幅が480ピクセル以下で縦長の場合に全面を覆う長方形を作成します。
選択肢Aの場合、表示領域が横長のときは2つめのセレクタが、縦長のときは3つめのセレクタが適用されるので、‪#‎wrapの背景色である赤が全面に表示されます‬。
選択肢Cの場合、表示領域の幅は2つめのセレクタの範囲ですが、縦横比が縦長なので2つめのセレクタは適用されません。結局デフォルトの1つめのセレクタが適用されるので下部に余白ができることになります。
選択肢Dもデフォルトの1つめのセレクタが適用されます。

出題範囲の詳細

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

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

このページの先頭へ