HTML5タグ虎の巻

pictureタグ

pictureは、レスポンシブイメージを表示するタグです。

解説

pictureタグを使うと、画面サイズや解像度によって画像を出し分ける事ができます。
使い方はpictureタグ内に、sourceタグとimgタグを指定します。
imgタグには表示する画像を、sourceタグにはレスポンシブの条件と対象画像を指定します。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
エンベッディッド・コンテンツ
コンテキスト
(親カテゴリ)
エンベッディッド・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
sourceタグimgタグ

属性

pictureタグには以下の属性が指定できます。

【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

横幅760px以上はtest1.png、320px以上はtest2.pngを表示する

<picture>
  <source media="(min-width: 760px)" srcset="test1.png">
  <source media="(min-width: 320px)" srcset="test2.png">
  <img src="test2.png">
</picture>

320px未満の場合はimgタグに定義したtest1.pngが表示されます

2倍の解像度を持つ画面の場合はtest1-2.pngを、通常の場合はtest1.pngを表示する

<picture>
  <source srcset="test1.png, test1-2.png 2x" />
  <img src="test1.png">
</picture>

レスポンシブと解像度により画像を出し分ける

<picture>
  <source media="(min-width: 760px)" srcset="test1.png, test1-2.png 2x" />
  <source media="(min-width: 320px)" srcset="test2.png, test2-2.png 2x" />
  <img src="test1.png">
</picture>

備考

  • pictureタグ内では、imgタグを一番最後に指定する必要があります。
  • pictureは、HTML5から新たに追加になったタグです。

関連項目

  • picture:レスポンシブイメージを表示する
  • source:ファイルを複数指定する
  • img:画像を表示する