source タグエレメント

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

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

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>

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

- ad -

属性

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

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

動作の確認

- ad -

JavaScript

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

source タグエレメント

属性

動作の確認

JavaScript

関連（Related）