<source>: SOURCE 要素
最終更新：2026-10-13
<source>SOURCE 要素
audio・video・picture にメディアリソースを提供し、互換性やレスポンシブ対応のため複数のバリアントを指定できます。
| カテゴリ | リンクとメディア |
|---|---|
| コンテンツモデル | 空要素 |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
<source src="..." type="...">⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
src | Media resource URL. | |
type | MIME type of the resource, e.g. audio/mpeg. | |
media | Media query condition (used by picture for responsiveness). |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <source> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： source は空要素（終了タグなし）です。ブラウザーは最初に対応した source を選びます。
❓ よくある質問
Qsource は単独で使えますか？
A使えません。
<source> は空要素で、<picture>、<video>、<audio> の子要素としてのみ置けます。親に候補リソースを提供するだけで、自分では何も描画しません。Qsource の src と srcset の違いは何ですか？
Avideo/audio には
src（単一のアドレス）を使い、picture の source には srcset（「アドレス＋幅や密度の記述」を複数組書け、sizes と合わせてレスポンシブに選図）を使います。属性の組み合わせを間違えると、ブラウザは黙って無視します。Q複数の source の順序に決まりはありますか？
Aブラウザは上から順に「最初に対応しているもの」を採用します。新しい形式や小さいサイズを前に、フォールバックを最後に置きます（picture ではフォールバックは img そのものです）。順序を逆にすると旧形式が先に当たり、新形式は永遠に使われません。
🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
