<source>タグの解説
<source>は、画像・動画・音声などのメディアリソースを提供する要素です。具体的には<picture>、<video>、<audio>の子要素に配置し、その埋め込み要素が条件に応じて配信するメディアのリソースを指定します。
一般的には、各ブラウザ毎にサポートの異なる複数のメディア形式を指定したり、画面の幅に応じて画像のサイズを変える場合に用います。複数のリソース候補を記述しておくことで、フォーマットの異なるメディアファイルに対応し、ユーザーの環境ごとに最適なデータを提供できるようになります。
<source>タグの特徴
- この要素自体は可視化されません。親要素によって読み込まれるファイルの候補を示すだけです。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
<source>要素に指定できる属性
srcset<picture>が親の場合のみ指定できます。ブラウザが使用できる画像のリソースをひとつ以上、カンマ区切りで指定できます。リソースに対してピクセルの幅（w）や密度（x）の解釈を与えることも可能です。type- メディアファイルのMIMEタイプやコーデックを指定します。
media- ソースが意図したメディア・クエリーを指定します。親要素が
<picture>の場合にのみ使用できます。 sizes<picture>が親の場合のみ指定できます。最終的に画像が表示される幅を指定します。この値はsrcset属性で指定された画像が読み込まれる時、ページのレイアウトを行う前にブラウザーが使用します。height<picture>が親の場合のみ指定できます。画像の高さをピクセル単位で指定します。値は単位のない整数で表します。width<picture>が親の場合のみ指定できます。画像の幅をピクセル単位で指定します。値は単位のない整数で表します。
<source>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。必ず親要素に<picture>、<video>、<audio>のいずれかが配置されます。
<picture>
<source srcset="file" attr="value">
<img src="file" alt="text">
</picture>
<video>
<source src="file" type="value">
</video>
<audio>
<source src="file" type="value">
</audio>
画像のリソースを提供する
画面の大きさに応じて適切なサイズの画像を出し分けたい場合は、条件を指定して呼び出すファイルを変えることができます。<picture>要素を使って<img>に複数のリソースを関連付ける場合、以下のように記述します。
<picture>
<source srcset="logo-s.png" media="(max-width: 400px)">
<source srcset="logo-m.png" media="(max-width: 600px)">
<source srcset="logo-l.png" media="(max-width: 800px)">
<img src="logo-m.png" alt="Site Logo">
</picture>
動画のリソースを提供する
ページ上に動画コンテンツを配置する場合、一種類のコーデックしか提供するのではなく、複数の候補を用意しておいた方が幅広い環境に対応できます。
<video controls autoplay>
<source src="foo.webm" type="video/webm">
<source src="foo.ogg" type="video/ogg">
<source src="foo.mov" type="video/quicktime">
ご利用中のブラウザでは動画の再生を行えません。
</video>
音声のリソースを提供する
音楽や音声コンテンツを<audio>で提供する場合、複数のコーデックを候補として提供できます。
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
<p>Download <a href="example.com">Music Site</a></p>
</audio>