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

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

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

例題4.2「1.4.2 メディアクエリ」
レベル1の出題範囲「1.4.2 メディアクエリ」からの例題を解説します。
CSS3におけるMedia Queries(メディアクエリ)に関して以下のような記述がある場合、中に記述しているbody要素に関するスタイルシートが適用される条件として正しいものを1つ選びなさい。
@media screen and (max-width :640px) { body { background-color: blue; margin: 30px; } }
  • 端末における画面解像度の幅が、640px以上の時に適用される。
  • 端末における画面解像度の幅が、640px以下の時に適用される。
  • ビューポート(ブラウザの表示領域)の幅が、640px以上の時に適用される。
  • ビューポート(ブラウザの表示領域)の幅が、640px以下の時に適用される。
  • 環境に関わらず、いかなる条件下でも適用されない。

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

答え D
Media Queriesは、スタイルシートの適用条件にスクリーンサイズや端末の向きなどを指定できるCSS3の機能です。
問題にある記述ではmedia typeにscreen、media feature(媒体特性)にmax-widthとあるので、ビューポート(ブラウザの表示領域)の幅・最大640pxまでを適用の条件としています。
よって答えはDです。
Cの640px以上である事を条件に指定したい場合、media featureはmin-widthとなります。
A,Bにある、端末の画面解像度を条件とする場合は、media feature(媒体特性)にmin-device-width,max-device-widthと指定する必要があるので、ビューポートのサイズとの混同に注意してください。

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社(ビジネスパートナー)
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

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

このページの先頭へ