pictureの使い方についてまとめ

pictureの概要

picutureは0個以上のsourceと1つのimg要素を含み、様々な画面や端末の条件に応じた画像を表示させる要素です。レスポンシブイメージを実現されるための要素でimgで表示する画像の代わりに、ブラウザの横幅などの条件に準じて、他の画像を指定するsource要素をグルーピングするために用いられます。

pictureのカテゴリー

コンテンツカテゴリー

    コンテンツモデル

    • コンテンツモデルなし

pictureに入れられるタグ一覧

タグ早見表

0個以上のsource要素とそれに続く1個のimg要素、またはスクリプトサポーティング要素

入れられるタグのカテゴリー・モデル

pictureに使える属性

属性とは<picture> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら

スポンサードサーチ

<picture>の使い方



ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer なし
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり