最終更新日:
公開日:
リファレンス
HTML
ピクチャー
picture要素
レスポンシブによる画像切り替えを行うために使用します。子要素としてimg要素とsource要素を用い、複数の画像を使い分けます。
サンプルコード
<picture>
<img src="/images/sample.jpg" alt="通常ディスプレイ用の画像">
<source srcset="/images/sample_2x.jpg 2x" title="Retinaディスプレイ用の画像">
</picture>
-
カテゴリー
フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ
-
コンテンツモデル
-
使用ケース
埋め込みコンテンツが期待される場所
属性
- グローバル属性
-
グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。