＜source要素＞ - ソース
公開日:
source要素は、ソースの1つであることを表す要素です。video要素、audio要素、picture要素の子要素として利用できます。
概要
- 名前
- source
- カテゴリー
- なし。
- 配置できる場所
- picture要素の子要素の場合、img要素よりも前に配置すること。
- audio要素、またはvideo要素の子要素の場合、どのFlow content、またはtrack要素よりも前に配置すること。
- コンテンツモデル
- 空要素のため、子ノードを持ちません。
- タグの省略
- 省略できません。
- DOM Interface
- HTMLSourceElement
- 仕様書
- https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
属性
src
リソースのアドレス。
type
リソースのMIMEタイプ。
srcset
リソースのアドレスの1個以上のセット。ユーザーエージェントは、条件に合わせてこれらの中から画像を選択する。
sizes
srcset属性の画像を選択する時の、基準となる幅を指定する。
media
メディアクエリを指定すると、ユーザーエージェントはそのメディアクエリの条件に一致した場合だけ、このソースを選択する。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
source要素は、picture要素の子要素か、audio要素、video要素の子要素かで、仕様が変わります。
picture要素の場合
- srcset属性を、指定しなければいけない。
- srcset属性に幅記述子がある場合、sizes属性も指定しなければいけない。
- media属性を、指定できる。
- type属性を、指定できる。
- src属性は、指定できない。
audio要素、video要素の場合
- src属性を、指定しなければいけない。
- srcset属性は、指定できない。
- media属性は、指定できない。
- type属性を、指定できる。
- sizes属性は、指定できない。
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜source要素＞ - ソース</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/source/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>source要素は、ソースを表す要素です。video要素、audio要素、picture要素で複数のソースを指定する時に利用します。下記は、webpに対応していたら<a href="./image.webp">image.webp</a>を、対応してなかったら<a href="image.png">image.png</a>を表示するように、複数のソースを指定した例です。</p>
<picture>
<!-- 基本のソースを除いた、1個以上のソース -->
<source src="./image.webp" type="image/webp">
<!-- 基本のソースとなるimg要素 -->
<img src="./image.png">
</picture>
</body>
</html>