<picture> - ピクチャ

• トップ
• HTMLリファレンス
• <picture>

• 概要
• 説明
• 属性
• 使用例
• 関連項目
• リンク

概要

形式

<picture>～</picture>

サポート

https://caniuse.com/picture

カテゴリ

フローコンテンツ

フレージングコンテンツ

エンベデッドコンテンツ

親要素

エンベデッドコンテンツ を子要素に持てるもの

子要素

0個以上の source 要素とそれに続く 1個の img 要素、スクリプトサポート要素

タグの省略

開始タグ:必須 / 終了タグ:なし

属性

グローバル属性

説明

<picture> はレスポンシブイメージを実現するための要素です。<img> で表示する画像の代わりに、ブラウザの横幅などの条件に従い、他の画像を指定する <source> 要素をグルーピングするために用いられます。使用例を参照してください。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

使用例

下記の例では、表示領域の横幅が 45em 以上の場合は large.jpg を、32em 以上の場合は med.jpg を、それ以下の場合は small.jpg を表示します。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

関連項目

• <img>
• <source>

リンク

• https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
• https://caniuse.com/picture