sourceタグ
sourceは、ファイルを複数指定するタグです。
解説
audioタグ、videoタグ、pictureタグの子要素として指定します。
ファイルを複数指定することで、環境に合わせた最適なファイルを選択することができます。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | なし |
| コンテキスト (親カテゴリ) | audioタグ、videoタグ、pictureタグ |
| コンテンツ・モデル (子カテゴリ) | なし |
属性
sourceタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| src | ファイルを指定する （例）src="sample.png" ※audioタグ、videoタグでは必須です。 |
| media | 指定したファイルがどのメディア向けかを指定する （例）media="(min-width:760px)" ※pictureタグ内の場合のみ有効です。 |
| srcset | １つ以上のファイルを指定する （例）srcset="test1.png, test1-2.png 2x" ※ファイルはカンマで区切って指定します。 |
| type | ソースのMIMEタイプを指定する （例）type="video/mp4" |
| sizes |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
横幅760px以上はtest1.png、320px以上はtest2.pngを表示する
<picture>
<source media="(min-width: 760px)" srcset="test1.png">
<source media="(min-width: 320px)" srcset="test2.png">
<img src="test2.png">
</picture>
320px未満の場合はimgタグに定義したtest1.pngが表示されます
videoタグに使用した例
<video controls>
<source src="test.mp4" type="video/mp4">
<source src="test.mov" type="video/quicktime">
</video>
備考
- sourceは、HTML5から新たに追加になったタグです。
