エキスパート:実技問題(HTML作成、CSS読込と作成、画像の表示、JavaScriptの読込、レスポンシブWebデザイン対応)
レスポンシブ対応のページで、画面幅によって構図の異なる画像を出し分けるためにpicture要素を使用する場合の正しい記述手順はどれか。
- Apicture要素内にimg要素を先に記述し、その後に複数のsource要素を記述する
- ✓picture要素内に複数のsource要素をmedia属性とともに記述し、最後にデフォルト表示用のimg要素を記述する
- Cpicture要素の中にはimg要素のみを複数記述し、CSSのメディアクエリで表示を切り替える
- Dpicture要素にsrcset属性を直接指定し、source要素は使用しない
解説
picture要素は複数のsource要素で条件に応じた画像を指定し、いずれの条件にも合致しない場合や非対応ブラウザのために最後にimg要素をフォールバックとして記述する必要がある。
根拠実技問題:画像の表示/レスポンシブWebデザイン対応