Smart Communication Design Company
ホーム > ナレッジ > 用語集 > Web制作用語集 > HTML用語集 > picture要素

picture要素

picture要素はHTML5から新たに追加された要素です。
ユーザーの閲覧環境に応じて最適な画像を表示させることができます。

読み込まれるソースセットのコンテナとして機能し、picture要素自身は意味を持たずソースセットの中で表示されている子要素を表します。

使用例

後述するコード断片は、次に列挙するリストの順にリソースの埋め込みを試みる使用例です。

  1. 画面幅が1280px以上だった場合「dummy-c.png」を表示する
  2. 画面幅が768px以上だった場合「dummy-b.png」を表示する
  3. 画面幅が640px以上だった場合「dummy-a.png」を表示する
  4. いずれにも該当しなかった場合「dummy.png」を表示する
  5. dummy.pngが読み込めなかった場合、代替テキストを表示する
<picture>
<source srcset="dummy-c.png" media="(min-width: 1280px)">
<source srcset="dummy-b.png" media="(min-width: 768px)">
<source srcset="dummy-a.png" media="(min-width: 640px)">
<img src="dummy.png" alt="代替テキスト">
</picture>

後述するコード断片は、次に列挙するリストの順にリソースの埋め込みを試みる使用例です。

  1. svgファイルの埋め込みを試みる
  2. svgファイルに対応していない環境だった場合、pngファイルの埋め込みを試みる
  3. pngファイルに対応していない環境だった場合、gifファイルの埋め込みを試みる
  4. gifファイルに対応していない環境、またはdummy.gifが読み込めなかった場合、代替テキストを表示する
<picture>
<source srcset="dummy.svg" type="image/svg+xml">
<source srcset="dummy.png" type="image/png">
<img src="dummy.gif" alt="代替テキスト">
</picture>

使用可能な属性

コンテンツカテゴリ

子要素にしていい要素の種類

親要素にしていい要素の種類

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2017年9月5日