WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <picture>「画像」

<picture> 「画像」[読み方：ピクチャー]

<picture>タグは、imgタグと、複数のsourceタグを提供するコンテナです。
imgタグはデフォルトの画像、sourceタグは条件によって切り替える画像を定義します。

HTML規格HTML4.01HTML5
使用可否×○
<picture>は、HTML5以降に追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」（英語のサイトです）
広告

<picture> の仕様

カテゴリー使用できる場所（親要素）コンテンツモデル（子要素）タグ省略
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
パルパブルコンテンツ		エンベディッドコンテンツを子要素にもてる場所<img>を必ず指定
<source>、スクリプトサポート要素		不可

<picture>の属性

【構文】
<picture>
<source media="(表示条件)" srcset="ソース画像ファイル">
<img src="イメージ画像ファイル" alt="代替テキスト">
</picture>
属性意味値のサンプルなど
---
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<picture>のサンプル

横幅で画像を切り替え
<picture>
<source media="(min-width: 600px)" srcset="dummy_ad300.gif">
<img src="dummy_ad160.gif" alt="サンプル">
</picture>
サンプル画像
ページTOP

留意事項

  • <picture>タグ自体は、何も表示しません。タグ内に指定されたimgタグと、複数のsourceタグの中で、適切なものを選択可能にしているのみです。
  • <picture>タグ内に、sourceタグを指定する場合、src属性は意味がありません。画像ファイルは、srcset属性に指定します。
ページTOP
関連するHTMLタグ
source動画、音声のリソース再生候補
img画像
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン