基礎

HTML要素

ピクチャー

picture要素

最終更新日：2023-10-09
公開日：2016-05-17

レスポンシブによる画像切り替えを行うために使用します。
子要素としてimg要素とsource要素を用い、複数の画像を使い分けます。

HTML サンプルコード

<picture>
  <img src="/images/sample.jpg" alt="通常ディスプレイ用の画像">
  <source srcset="/images/sample_2x.jpg 2x" title="Retinaディスプレイ用の画像">
</picture>

カテゴリー

フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ
コンテンツモデル

1つのimg要素と、0個以上のsource要素、またはスクリプト支援要素を使用することができる
使用ケース

埋め込みコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。