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

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

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

例題4.10 「1.4.1 マルチデバイス対応ページの作成」
レベル1の出題範囲「1.4.1 マルチデバイス対応ページの作成」からの出題です。
今後の仕様化が検討されているpicture要素についての記述で不適切なものを1つ選びなさい。なお本問題の仕様はHTML 5.1 2015年10月8日ワーキングドラフトに基づくものとする。
  • picture要素ではsource要素、img要素を組み合わせて、表示領域のサイズに応じて複数の画像を指定できる。
  • source要素ではmedia属性でメディアクエリ(Media Queries)を指定できる。
  • picture要素には指定が必須の属性は無い。
  • source要素の属性はグローバル属性を除くとsrcset属性、sizes属性、media属性、type属性の4つがある。
  • img要素でもsrcset属性やsize属性が利用できるが、srcset属性を指定した場合src属性は指定してはいけない。

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

正解 E
picture要素は0個以上のsource要素とそれに続くimg要素を子として持ちます。
source要素では一般に、表示すべき画像をsrcset属性で、表示する条件をmedia属性で指定します。
例1)
<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt="HTML5プロフェッショナル"> </picture>
2015年10月8日ワーキングドラフトではimg要素でもsrcset属性やsize属性が利用できるようになっています。
img要素ではsize属性で指定されたサイズを基に、srcset属性で指定された画像の候補リストから適切な画像が表示されます。
例2)
<img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w" src="wolf-400.jpg" alt="The rad wolf">
細かい仕様は今後変わっていくと思われるので、現状は大まかなところを把握しておけばよいでしょう。

出題範囲の詳細

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

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

このページの先頭へ