From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/source/index.html | 165 ++++++++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 files/ja/web/html/element/source/index.html (limited to 'files/ja/web/html/element/source') diff --git a/files/ja/web/html/element/source/index.html b/files/ja/web/html/element/source/index.html new file mode 100644 index 0000000000..bb655588d7 --- /dev/null +++ b/files/ja/web/html/element/source/index.html @@ -0,0 +1,165 @@ +--- +title: ': メディアまたは画像のソース要素' +slug: Web/HTML/Element/source +tags: + - Element + - HTML + - HTML embedded content + - Media + - Reference + - Web + - Web Performance +translation_of: Web/HTML/Element/source +--- +
{{HTMLRef}}
+ +

HTML の <source> 要素は、 {{HTMLElement("picture")}} 要素、 {{HTMLElement("audio")}} 要素、 {{HTMLElement("video")}} 要素に対し、複数のメディアリソースを指定します。この要素は空要素であり、つまり中身も閉じタグもありません。画像ファイル形式やメディアファイル形式の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。

+ +

{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリなし
許可されている内容なし。この要素は{{Glossary("empty element", "空要素")}}です。
タグの省略開始タグは必須。終了タグを記述してはならない。
許可されている親要素 +
メディア要素（{{HTMLElement("audio")}} または {{HTMLelement("video")}}）の場合、どの フローコンテンツまたは {{HTMLElement("track")}} 要素よりも前に配置する。
+ +
{{HTMLElement("picture")}} 要素の場合、 {{HTMLElement("img")}} 要素より前に配置する。
+
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロールなし
DOM インターフェイス{{domxref("HTMLSourceElement")}}
+ +

属性

+ +

この要素にはグローバル属性があります。

+ +
+
{{htmlattrdef("media")}}
+
リソースの志向するメディアのメディアクエリ。この属性は {{HTMLElement("picture")}} 要素の内部でのみ使用します。
+
{{htmlattrdef("sizes")}}
+
+

ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をカンマ区切りで並べたものです。この情報は {{htmlattrxref("srcset", "source")}} で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 sizes は srcset でピクセル倍率ではなく幅指定子が提供された時 (例えば 2x ではなく 200w の場合) のみ、効果があることに注意してください。

+ +

sizes 属性は、 {{HTMLElement("source")}} 要素が {{HTMLElement("picture")}} 要素の子要素である場合にのみ効果があります。

+
+
{{htmlattrdef("src")}}
+
メディアのリソースの場所であり、 {{HTMLElement("audio")}} および {{HTMLElement("video")}} では必須です。 {{HTMLElement("picture")}} 要素の内部にある <source> 要素では、この値は無視されます。
+
{{htmlattrdef("srcset")}}
+
+

1つ以上の文字列をカンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。

+ +
    +
  1. 画像を指定する URL を1つ
    2. +
  2. 幅記述子。これは正の整数に "w" を付加した文字列で、例えば 300w のようになります。指定しない場合の既定値は無限大です。
    3. +
  3. 画素密度記述子。これは直後に "x" を付加した正の浮動小数点数です。指定しない場合の既定値は 1x です。
    4. +
+ +

リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内には、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。ブラウザーは、表示する時点でもっとも適切な画像を選択します。

+ +

srcset 属性は、 {{HTMLElement("source")}} 要素が {{HTMLElement("picture")}} 要素の子要素である場合にのみ効果があります。

+
+
{{htmlattrdef("type")}}
+
リソースの MIME メディアタイプ で、オプションで codecs 引数 を伴います。
+
+ +

type 属性が指定されていない場合は、サーバーからメディア形式を取得して、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示ができない場合は、次の <source> をチェックします。 type 属性が指定された場合、ユーザーエージェントが表示できる形式と比較し、扱えないものであれば、サーバーはクエリーさえ行わず、次の <source> 要素をチェックします。

+ +

<picture> コンテキストで使用された場合、ブラウザーは <picture> 要素の {{HTMLElement("img")}} 子要素で指定された画像は、それぞれの <source> を評価した後で合う画像がなかった場合に使用されます。

+ +

使用上のメモ

+ +

<source> 要素は空要素、すなわち内容がないだけでなく、終了タグもありません。すなわち、 "</source>" は HTML の中で決して使われません。

+ +

ウェブブラウザーが対応している画像形式の詳細と、使用する適切な形式を選択するためのガイダンスについては、ウェブ上で使用する画像ファイルの種類と画像のガイドを参照してください。使用できる動画・音声メディアの種類については、ウェブ上で使用するメディアの種類と形式のガイドを参照してください。

+ +

例

+ +

動画の例

+ +

次の例は、 Ogg 形式に対応したブラウザーと QuickTime 動画形式を再生可能な環境を想定した記述例です。 audio 要素や video 要素に対応していない場合、代わりにメッセージが表示されます。 audio 要素や video 要素には対応していても指定した形式のすべてが再生不可である場合は、 error イベントが発生し、（もしあれば）既定のメディアコントロールがエラーを示します。使用できるメディアファイル形式や、ブラウザーが対応しているメディアファイル形式の詳細については、ウェブ上のメディアの種類と形式についてのガイドを参照してください。

+ +
<video controls>
+  <source src="foo.webm" type="video/webm">
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mov" type="video/quicktime">
+  I'm sorry; your browser doesn't support HTML5 video.
+</video>
+
+ +

その他の例については、学習エリアの記事動画と音声のコンテンツにすばらしいリソースがあります。

+ +

図形の例

+ +

この例では、2つの <source> 要素が {{HTMLElement("picture")}} 内に含まれており、利用可能な空間の大きさがある幅を超えた時に使用する画像のバージョンを提供します。利用可能な幅がこれらの幅よりも小さい場合、ユーザーエージェントは {{HTMLElement("img")}} 要素で指定された代替画像を表示します。

+ +
<picture>
+   <source srcset="mdn-logo-wide.png" media="(min-width: 800px)">
+   <source srcset="mdn-logo-medium.png" media="(min-width: 600px)">
+   <img src="mdn-logo-narrow.png" alt="MDN Web Docs">
+</picture>
+
+ +

<picture> 要素では、常に一つの <img> 要素をフォールバック画像として、 alt 属性をアクセシビリティのためにつける必要があります。 (画像が関係のない背景の装飾的な画像でない限り)。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '<source>')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.source")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf