<picture> - ピクチャ

トップ > HTMLリファレンス > <picture>

概要

項目説明
形式<picture>~</picture>
サポートH5.1 / Edge13 / Ch38 / Fx38 / Op25 / Sa9.1
カテゴリフローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ
親要素エンベデッドコンテンツ を子要素に持てるもの
子要素0個以上の source要素とそれに続く 1個の img要素、スクリプトサポート要素
タグの省略開始タグ:必須 / 終了タグ:なし

説明

<picture> はレスポンシブイメージを実現するための要素で、<img> で表示する画像の代わりに、ブラウザの横幅などの条件に従い、他の画像を指定する <source> 要素をグルーピングするために用いられます。使用例を参照してください。

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
contextmenu=menuH5.1/Fx8。コンテキストメニューを指定します。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
draggable=boolH5.1。要素をドラッグ可能にします。
dropzone=zoneH5.1。ドロップゾーンを指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

下記の例では、表示領域の横幅が 45em 以上の場合は large.jpg を、32em 以上の場合は med.jpg を、それ以下の場合は small.jpg を表示します。

HTML
<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

関連項目

<img><source>

リンク


Copyright (C) 2011-2017 杜甫々
初版:2011年6月11日 最終更新:2017年11月12日
http://www.tohoho-web.com/html/video.htm