トップページ  > HTML Living Standard  > <picture>

★HTML Living Standard リファレンス

<picture> …… 画像リソースの選択肢を提供する
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<picture>タグは、画像リソースの選択肢を提供する際に使用します。

picture要素内で複数の画像リソースを指定しておくことで、ブラウザが利用する画像リソースの選択肢を提供できます。 具体的には、picture要素の子要素にsource要素を配置してsrcset属性の値に画像リソースのURLを指定します。

source要素のsrcset属性と同時にmedia属性を指定することで、画面のピクセル密度、ビューポートサイズ、画像形式などに応じて、 ブラウザがどんな環境でどの画像リソースを利用するかを指定できます。

複数のsource要素の後にはimg要素を配置します。 source要素の後に配置するimg要素は、source要素で指定したいずれの条件にも合致しない場合にデフォルト表示されます。

■使用例

以下のサンプルは、メディアの画面幅に応じて利用する画像リソースを切り替えるように指定しています。 パソコンでご覧の場合には、ブラウザの横幅を変更してみてください。

HTMLソース

<picture>
 <source srcset="./sample/pear-mobile.jpg" media="(max-width: 720px)">
 <source srcset="./sample/pear-pc.jpg" media="(max-width: 1280px)">
 <img src="./sample/pear-desktop.jpg" alt="洋ナシはジューシーです。">
</picture>
↓↓↓

ブラウザ上の表示

洋ナシはジューシーです。

picture要素自体は何も表示しない

picture要素は、video要素audio要素とはリソース選択のアルゴリズムが異なります。 要素内にsource要素を配置する点は同じですが、picture要素内に配置されたsource要素のsrc属性は意味を持ちません。

picture要素は、子要素のsource要素によってimg要素のURLを提供するだけのコンテナ要素です。 あくまでも画像リソースの選択肢を提供するのが役割で、picture要素自体は何も表示しません。

■関連項目

  • <picture> …… 画像リソースの選択肢を提供する
  • <source> …… リソースの選択肢をセットする
  • <img> …… 画像を表す
  • <embed> …… 埋め込みリソースを表す
  • <object> …… 外部リソースを表す
  • <video> …… ビデオを表す
  • <audio> …… サウンドやオーディオを表す
  • <track> …… メディア要素のテキストトラックを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ