HTML Living Standard/source

source 要素

<source> 要素は、メディアクエリや解像度に基づいて異なるメディアソースを指定するために使用されます。主に、画像や動画、音声などのメディアコンテンツにおいて、最適なソースを選択するために使用されます。これにより、レスポンシブデザインや適切なメディアの選択が可能となり、ユーザーに最適な体験を提供できます。

カテゴリ

メタデータコンテンツ
メディアコンテンツ

使用される文脈

<picture> 要素内
<audio> 要素や <video> 要素内（メディアソースの指定）

コンテンツモデル

<source> 要素は、ソースを指定するために使用され、以下の内容を含みます：

srcset 属性（画像や動画のソースを指定）
media 属性（メディアクエリを使用して条件に基づいて異なるソースを指定）
type 属性（メディアタイプを指定）
src 属性（デフォルトのメディアソースを指定）

<source> 要素は、メディアソースを切り替えるための条件を指定するために使用されます。例えば、解像度や画面サイズ、メディアの種類に基づいて異なる画像や動画を提供できます。

属性

srcset — 画像や動画の異なるソースを指定します。解像度やサイズに応じてブラウザが最適なソースを選択します。
media — メディアクエリを指定し、異なる条件に基づいてソースを切り替えます。例えば、画面サイズや解像度に基づいて異なる画像を表示します。
type — ソースのメディアタイプを指定します。例えば、画像の場合は image/webp や image/png などのMIMEタイプを指定します。
src — デフォルトのメディアソースを指定します。srcset や media の条件に該当しない場合に使用されます。

使用例

画像の選択

<source> 要素は、<picture> 要素内で主に使用され、異なる画面サイズや解像度に基づいて異なる画像を表示するために使用されます。

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 500px)">
  <img src="image-small.jpg" alt="A responsive image">
</picture>

この例では、<source> 要素内で media 属性を使用して、画面の幅に基づいて異なる画像を選択します。media 属性に指定した条件に一致する場合、該当する srcset 属性の画像が表示されます。条件に合致しない場合、<img> 要素の src 属性で指定したデフォルトの画像が表示されます。

解像度に基づく画像の選択

<source> 要素は、srcset 属性を使用して、解像度に基づいて異なる画像を選択することができます。

<picture>
  <source srcset="image@2x.jpg 2x, image@3x.jpg 3x">
  <img src="image.jpg" alt="A high resolution image">
</picture>

この例では、srcset 属性を使って、解像度が2倍や3倍のディスプレイ向けに異なる画像を提供しています。ブラウザは最適な解像度の画像を選んで表示します。

動画のソース指定

<source> 要素は、<video> 要素内でも使用され、異なるフォーマットの動画ソースを提供するために使用されます。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogv" type="video/ogv">
  <source src="movie.webm" type="video/webm">
  <p>Your browser does not support the video tag.</p>
</video>

この例では、異なる形式の動画ファイル（MP4, OGV, WebM）を <video> 要素内で提供しています。ブラウザはサポートしている形式の動画を選択して再生します。

オーディオのソース指定

<source> 要素は、<audio> 要素内でも使用され、異なるオーディオソースを提供するために使用されます。

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser does not support the audio element.</p>
</audio>

この例では、異なる形式のオーディオファイル（MP3, OGG）を <audio> 要素内で提供しています。ブラウザはサポートしている形式のオーディオを選択して再生します。

アクセシビリティの考慮事項

<source> 要素は、複数のメディアソースを指定するため、特に視覚的または聴覚的なコンテンツのアクセシビリティに配慮する必要があります。<img> 要素のように、<source> 要素で提供するメディアの代替テキスト（alt 属性）や、<video> や <audio> 要素において字幕や説明を提供することが重要です。