path: root/files/ja/web/html/element/source/index.html

---
title: '<source>: メディアまたは画像のソース要素'
slug: Web/HTML/Element/source
tags:
  - Element
  - HTML
  - HTML embedded content
  - Media
  - Reference
  - Web
  - Web Performance
translation_of: Web/HTML/Element/source
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML の <code>&lt;source&gt;</code> 要素</strong>は、 {{HTMLElement("picture")}} 要素、 {{HTMLElement("audio")}} 要素、 {{HTMLElement("video")}} 要素に対し、複数のメディアリソースを指定します。</span>この要素は空要素であり、つまり中身も閉じタグもありません。<a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイル形式</a>や<a href="/ja/docs/Web/Media/Formats">メディアファイル形式</a>の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。</p>

<p>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</p>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td>なし</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>なし。この要素は{{Glossary("empty element", "空要素")}}です。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>開始タグは必須。終了タグを記述してはならない。</td>
  </tr>
  <tr>
   <th scope="row"><dfn>許可されている親要素</dfn></th>
   <td>
    <div>メディア要素（{{HTMLElement("audio")}} または {{HTMLelement("video")}}）の場合、どの <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>または {{HTMLElement("track")}} 要素よりも前に配置する。</div>

    <div>{{HTMLElement("picture")}} 要素の場合、 {{HTMLElement("img")}} 要素より前に配置する。</div>
   </td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>なし</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLSourceElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>があります。</p>

<dl>
 <dt>{{htmlattrdef("media")}}</dt>
 <dd>リソースの志向するメディアの<a class="internal" href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a>。この属性は {{HTMLElement("picture")}} 要素の内部でのみ使用します。</dd>
 <dt>{{htmlattrdef("sizes")}}</dt>
 <dd>
 <p>ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をカンマ区切りで並べたものです。この情報は {{htmlattrxref("srcset", "source")}} で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 <code>sizes</code> は <code>srcset</code> でピクセル倍率ではなく幅指定子が提供された時 (例えば 2x ではなく 200w の場合) のみ、効果があることに注意してください。</p>

 <p><code>sizes</code> 属性は、 {{HTMLElement("source")}} 要素が {{HTMLElement("picture")}} 要素の子要素である場合にのみ効果があります。</p>
 </dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>メディアのリソースの場所であり、 {{HTMLElement("audio")}} および {{HTMLElement("video")}} では必須です。 {{HTMLElement("picture")}} 要素の内部にある <code>&lt;source&gt;</code> 要素では、この値は無視されます。</dd>
 <dt>{{htmlattrdef("srcset")}}</dt>
 <dd>
 <p>1つ以上の文字列をカンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。</p>

 <ol>
  <li>画像を指定する URL を1つ</li>
  <li>幅記述子。これは正の整数に <code>"w"</code> を付加した文字列で、例えば <code>300w</code> のようになります。指定しない場合の既定値は無限大です。</li>
  <li>画素密度記述子。これは直後に <code>"x"</code> を付加した正の浮動小数点数です。指定しない場合の既定値は <code>1x</code> です。</li>
 </ol>

 <p>リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内には、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。ブラウザーは、表示する時点でもっとも適切な画像を選択します。</p>

 <p><code>srcset</code> 属性は、 {{HTMLElement("source")}} 要素が {{HTMLElement("picture")}} 要素の子要素である場合にのみ効果があります。</p>
 </dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd><a href="/ja/docs/Web/Media/Formats/Image_types">リソースの MIME メディアタイプ</a> で、オプションで <a href="/ja/docs/Web/Media/Formats/codecs_parameter"><code>codecs</code> 引数</a> を伴います。</dd>
</dl>

<p><code>type</code> 属性が指定されていない場合は、サーバーからメディア形式を取得して、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示ができない場合は、次の <code>&lt;source&gt;</code> をチェックします。 <code>type</code> 属性が指定された場合、ユーザーエージェントが表示できる形式と比較し、扱えないものであれば、サーバーはクエリーさえ行わず、次の <code>&lt;source&gt;</code> 要素をチェックします。</p>

<p><code>&lt;picture&gt;</code> コンテキストで使用された場合、ブラウザーは <code>&lt;picture&gt;</code> 要素の {{HTMLElement("img")}} 子要素で指定された画像は、それぞれの <code>&lt;source&gt;</code> を評価した後で合う画像がなかった場合に使用されます。</p>

<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>

<p><code>&lt;source&gt;</code> 要素は<strong>空要素</strong>、すなわち内容がないだけでなく、終了タグもありません。すなわち、 "<code>&lt;/source&gt;</code>" は HTML の中で決して使われません。</p>

<p>ウェブブラウザーが対応している画像形式の詳細と、使用する適切な形式を選択するためのガイダンスについては、ウェブ上で使用する<a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類と画像のガイド</a>を参照してください。使用できる動画・音声メディアの種類については、<a href="/ja/docs/Web/Media/Formats">ウェブ上で使用するメディアの種類と形式のガイド</a>を参照してください。</p>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Video_example" name="Video_example">動画の例</h3>

<p>次の例は、 Ogg 形式に対応したブラウザーと QuickTime 動画形式を再生可能な環境を想定した記述例です。 <code>audio</code> 要素や <code>video</code> 要素に対応していない場合、代わりにメッセージが表示されます。 audio 要素や video 要素には対応していても指定した形式のすべてが再生不可である場合は、 <code>error</code> イベントが発生し、（もしあれば）既定のメディアコントロールがエラーを示します。使用できるメディアファイル形式や、ブラウザーが対応しているメディアファイル形式の詳細については、<a href="/ja/docs/Web/Media/Formats">ウェブ上のメディアの種類と形式についてのガイド</a>を参照してください。</p>

<pre class="brush: html notranslate">&lt;video controls&gt;
  &lt;source src="foo.webm" type="video/webm"&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt;
  &lt;source src="foo.mov" type="video/quicktime"&gt;
  I'm sorry; your browser doesn't support HTML5 video.
&lt;/video&gt;
</pre>

<p>その他の例については、学習エリアの記事<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a>にすばらしいリソースがあります。</p>

<h3 id="Picture_example" name="Picture_example">図形の例</h3>

<p>この例では、2つの <code>&lt;source&gt;</code> 要素が {{HTMLElement("picture")}} 内に含まれており、利用可能な空間の大きさがある幅を超えた時に使用する画像のバージョンを提供します。利用可能な幅がこれらの幅よりも小さい場合、ユーザーエージェントは {{HTMLElement("img")}} 要素で指定された代替画像を表示します。</p>

<pre class="brush: html notranslate">&lt;picture&gt;
   &lt;source srcset="mdn-logo-wide.png" media="(min-width: 800px)"&gt;
   &lt;source srcset="mdn-logo-medium.png" media="(min-width: 600px)"&gt;
   &lt;img src="mdn-logo-narrow.png" alt="MDN Web Docs"&gt;
&lt;/picture&gt;
</pre>

<p><code>&lt;picture&gt;</code> 要素では、常に一つの <code>&lt;<a href="/ja/docs/Web/HTML/Element/img">img</a>&gt;</code> 要素をフォールバック画像として、 <code>alt</code> 属性をアクセシビリティのためにつける必要があります。 (画像が関係のない背景の装飾的な画像でない限り)。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '&lt;source&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("html.elements.source")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/Media/Formats">ウェブ上のメディアの種類と形式のガイド</a></li>
 <li><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの型と形式のガイド</a></li>
 <li>{{HTMLElement("picture")}} 要素</li>
 <li>{{HTMLElement("audio")}} 要素</li>
 <li>{{HTMLElement("video")}} 要素</li>
 <li><a href="/ja/docs/Learn/Performance">ウェブパフォーマンス</a></li>
</ul>