目次に戻る

picture要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  1. 0個以上のsource要素
  2. 上記に続いて、1個だけのimg要素必須。
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
意味・用法

画面ピクセル密度ビューポートサイズ、画像の形式、及びその他の要因を基礎として、画像を制御することを著者に許すために、又は利用するための画像のリソースに関してユーザーエージェントにヒントを与えるために、img要素を含む複数のリソースを提供するコンテナである。

私見・補足

子要素レスポンシブイメージに利用される画像のリソースの集まりである。

未対応ブラウザでは、子要素img要素が表示されるだけ。

表示確認

ソース

  <figure>
  <figcaption>picture要素サンプル(表示画面幅500pxを境に可変)</figcaption>
  <picture>
    <source media="(min-width:500px)" srcset="./sample/picture-min500px.gif" />
    <source media="(max-width:500px)" srcset="./sample/picture-max500px.gif" />
    <img src="./sample/picture-nosupport.gif" alt="picture要素未対応ブラウザで表示される画像" />
  </picture>
  </figure>
  
表示結果
picture要素サンプル(表示画面幅500pxを境に可変)
picture要素未対応ブラウザで表示される画像

未対応ブラウザにおいては、子要素img要素の画像が表示される。

IE6表示のスクリーンショット
IE6表示:未対応ブラウザ向けの代替画像のimg要素が表示されている

IE7からIE11も同様。