HTML リファレンスマニュアル

HTML タグ一覧

HTML: <picture> 要素

HTML <picture> 要素は、異なる表示に対応するために、0個以上の <source> 要素と1つの <img> 要素を含んでいます。/デバイスシーンに応じて画像バージョンを提供します。ブラウザは最も一致する子 <source> 要素を選択します。一致するものがない場合には、<img> 要素の src 属性の URL を選択します。選択された画像は <img> 要素が占めるスペースに表示されます。

例

スクリーンサイズに応じて異なる画像を表示する。一致するものがない場合やブラウザが picture 属性をサポートしていない場合には img 要素を使用します：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>基本ガイド(oldtoolbag.com)</title>
</head>
<body>
<h2>picture　要素</h2>
<picture>
　　<source　media="(min-width:　650px)"　srcset="/run/html/views.png">
　　<source　media="(min-width:　465px)"　srcset="/run/html/default.jpg">
　　<img　src="/run/html/haha.gif"　　style="width:auto;">
</picture>
</body>
</html>

テストを試してみる‹/›

定義

picture 要素は、異なるデバイス上で異なる画像を表示することができ、一般的にレスポンシブデザインに使用されます。

HTML5 <picture> 要素が導入され、画像リソースの調整がより柔軟になります。

<picture> 要素は0個以上の <source> 要素と1つの <img> 要素で構成されています。各 <source> 要素は異なるデバイスに対応し、異なる画像ソースを参照します。一致しない場合、<img> 要素の src 属性に指定された URL が選択されます。

注意: 　　　　

　　　　　　　　<img> 要素は最後の　<picture> 要素の後に、ブラウザがその属性をサポートしない場合、<img> 要素の画像が表示されます。　　　　

ブラウザのサポート

テーブルの数字は、その要素をサポートする最初のブラウザのバージョン番号を示しています。

IEFirefoxOperaChromeSafari

HTML 4.01 HTMLと5 の間の違い

<picture> 属性はHTML5 新たに定義された。

グローバル属性

<picture> タグのサポート HTMLのグローバル属性。

イベント属性

<picture> タグのサポート HTMLのイベント属性。

HTML: <q> タグ HTML: <pre> タグ