HTML5タグ虎の巻

sourceタグ

HTML5

sourceは、ファイルを複数指定するタグです。

解説

audioタグ、videoタグ、pictureタグの子要素として指定します。
ファイルを複数指定することで、環境に合わせた最適なファイルを選択することができます。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
なし
コンテキスト
(親カテゴリ)
audioタグvideoタグpictureタグ
コンテンツ・モデル
(子カテゴリ)
なし

属性

sourceタグには以下の属性が指定できます。

【属性】
属性説明
srcファイルを指定する
(例)src="sample.png"
 ※audioタグ、videoタグでは必須です。
media指定したファイルがどのメディア向けかを指定する
(例)media="(min-width:760px)"
 ※pictureタグ内の場合のみ有効です。
srcset1つ以上のファイルを指定する
(例)srcset="test1.png, test1-2.png 2x"
 ※ファイルはカンマで区切って指定します。
typeソースのMIMEタイプを指定する
(例)type="video/mp4"
sizes
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

横幅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から新たに追加になったタグです。

関連項目

  • picture:レスポンシブイメージを表示する
  • source:ファイルを複数指定する
  • video:動画を埋め込む