備忘録的プログラミングリファレンス

source タグエレメント

　source タグエレメントは、<video>、<audio>、<picture>といったメディアエレメントに条件によるリソースの選択が定義できる HTML タグエレメントです。

　source タグエレメントによって、ファイル形式、デバイス条件、コーデックサポートなどの条件によって読み込みリソースが設定でき、レスポンシブ web デザインに利用できます。

source タグエレメント
<picture>
	<source media="(min-width: 1200px)" srcset="img/monzen_autumn.jpg">
	<source media="(min-width: 600px)" srcset="img/monzen_autumn_600.jpg">
	<source media="(min-width: 450px)" srcset="img/monzen_autumn_450.jpg">
	<img src="img/monzen_autumn_300.jpg" alt="test_img" style="width:auto;">
</picture>

詳しくは「動作の確認」を参照してください。

　上記の例はデバイス条件である表示の横幅によって読み込む画像を変えています。

属性

　source タグエレメントは、グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
srcリソースURL。
srcset<picture>エレメントに使用。
media表示サイズ条件（デバイスによっても）を定義。CSSと同じ条件方法が使える。
sizesページレイアウトごとのページサイズ。
typeリソースのMIME-type

動作の確認

　source タグエレメントの動作確認です。
　source タグエレメントは、<video>、<audio>、<picture>といったメディアエレメントに条件によるリソースの選択が定義できます。

　以下の例では、source タグエレメントによって横幅に応じて表示する画像を変更しています。

　横幅を変更してみください。幅によって読み込む画像の大きさが変わります。

JavaScript

　source タグエレメントの定義については HTMLSourceElement インターフェイスを参照してください。

関連（Related）