picture要素
picture要素はHTML5から新たに追加された要素です。
ユーザーの閲覧環境に応じて最適な画像を表示させることができます。
読み込まれるソースセットのコンテナとして機能し、picture要素自身は意味を持たずソースセットの中で表示されている子要素を表します。
使用例
後述するコード断片は、次に列挙するリストの順にリソースの埋め込みを試みる使用例です。
- 画面幅が1280px以上だった場合「dummy-c.png」を表示する
- 画面幅が768px以上だった場合「dummy-b.png」を表示する
- 画面幅が640px以上だった場合「dummy-a.png」を表示する
- いずれにも該当しなかった場合「dummy.png」を表示する
- 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>後述するコード断片は、次に列挙するリストの順にリソースの埋め込みを試みる使用例です。
- svgファイルの埋め込みを試みる
- svgファイルに対応していない環境だった場合、pngファイルの埋め込みを試みる
- pngファイルに対応していない環境だった場合、gifファイルの埋め込みを試みる
- 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>使用可能な属性
- すべてのグローバル属性
コンテンツカテゴリ
- フローコンテンツ
- フレージングコンテンツ
- エンベディッドコンテンツ
子要素にしていい要素の種類
親要素にしていい要素の種類
- エンベディッドコンテンツが期待されているすべての要素
仕様書と策定状況
最終更新：2017年9月5日
ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。