HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

ピクチャー

picture要素

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

サンプルコード

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

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

  • コンテンツモデル

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

  • 使用ケース

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

属性

グローバル属性

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

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。