HTML5の<picture>要素の主な用途として最も適切なものはどれですか？

解説

正解は「画面幅や画像形式などの条件に応じて、ブラウザに異なる画像を選択させる」です。picture要素は、複数の画像候補を用意し、画面サイズやブラウザが対応している画像形式などの条件に応じて、適切な画像を選択させるために使います。条件ごとに表示する画像を切り替えられますpicture要素の中では、source要素で画像候補と条件を指定し、最後にimg要素を配置します。たとえば、画面幅によって異なる画像を表示できます。<picture> <source media="(min-width: 768px)" srcset="large.jpg"> <img src="small.jpg" alt="サンプル画像"> </picture>この例では、画面幅が768px以上ならlarge.jpgが候補になり、それ以外ではsmall.jpgが使用されます。また、WebPやAVIFなど、ブラウザが対応している画像形式に応じて画像を切り替える用途にも使えます。似ているHTML要素との違い「画像にキャプションや説明文を付けて」は、主にfigure要素とfigcaption要素の役割です。「画像をクリックしたときに別ページへ移動する」は、a要素で画像を囲むことで実現します。また、「画像の読み込み完了後にJavaScriptを実行する」はloadイベントなどを利用する処理であり、picture要素そのものの役割ではありません。画像表示を担当するのはimg要素ですpicture要素自体が画像ファイルを直接表示するわけではありません。source要素は条件に応じた画像候補を提示し、実際の画像表示にはimg要素を使用します。そのため、picture要素を使う場合でもimg要素を組み合わせるのが基本です。参考MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/picture\%22>MDN) Web Docs - picture: 画像要素