HTML - picture 要素

概要

名前
picture
カテゴリー
  • Flow content
  • Phrasing content
  • Embedded content
配置できる場所
Embedded content が期待される場所。
コンテンツモデル
0 個以上の source 要素と、それに続く 1 つの img 要素
説明
picture 要素は、出力対象とする機器のピクセル密度やビューポートのサイズなどブラウザが適切な画像を選択できるようにするために、複数の候補画像を内容として入れておける要素です。要素内容には、配下直後に source 要素を 0 個以上入れて、その後に img 要素を 1 個だけ入れます。(picture 要素に非対応の環境では、最後に配置した画像が表示されます。) 要素内容として入れた source 要素media 属性には、メディアクエリの ( ) 内で指定する条件がそのまま指定でき、最初に条件に合致した画像が表示されます。どの条件にも合致しない場合は、最後の img 要素の画像が使用されます。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLPictureElement
仕様書
仕様書策定状況コメント
LS:現行の標準
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
×1338389.1259.338
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。

サンプルコード

picture 要素のサンプルコードは以下のとおりです。

<picture>
  <source srcset="logo-wide.png" media="(min-width: 600px)">
  <img src="logo.png" alt="logo">
</picture>
picture 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
6
Shares:
0
Tag:
HTML
hatebu icon
hatebu