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

<source> エレメント

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

 <source> エレメントによって、ファイル形式、デバイス条件、コーデックサポートなどの条件によって読み込みリソースが設定できるのです。

<source> エレメント
<picture>
  <source media="(min-width: 1300px)" srcset="img/image1300.jpg">
  <source media="(min-width: 1100px)" srcset="img/image1100.jpg">
  <img src="img/image_normal.jpg" alt="test_img" style="width:auto;">
</picture>
	
詳しくは「動作の確認」を参照してください。

JavaScript

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

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

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

動作の確認