ウェブランサー

<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
親にできる要素 埋め込みコンテンツを利用可能な全ての要素
子にできる要素 1つの<img>要素と、0個以上の<source>要素
対応ブラウザ <picture>の対応状況を確認する

<picture>タグの説明

<picture>は、特定の<img>に対して複数の<source>要素を定義することができるコンテナを設置します。レスポンシブデザインなど、ドキュメントを参照する環境に応じて最適なコンテンツを提供するために用います。

<picture>タグの特徴

<picture>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

<picture>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。

<picture>タグの使い方とサンプル

<picture>を使ったマークアップのサンプルです。

HTML
<picture>
	<source srcset="img_small.png" media="(max-width: 640px)">
	<img src="img_big.png" alt="Sample Image">
</picture>

<picture>に関連するHTMLタグ

コンテンツエンベット要素
<area> イメージマップの領域を指定する
<audio> ドキュメント内に音声コンテンツを埋め込む
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<embed> プラグインデータを埋め込む(NN独自)
<iframe> インラインフレームを作成する
<img> 画像を表示する
<map> 一つの画像に対して複数のリンクを設定する
<object> FLASHやデータを埋め込む
<param> パラメーターを指定する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<script> JAVAなどのスクリプトを埋め込む
<track> 動画や音声ファイルに字幕やキャプションを追加する
<video> ページ内に動画コンテンツを表示する