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/picture/index.html | 166 +++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/ja/web/html/element/picture/index.html (limited to 'files/ja/web/html/element/picture/index.html') diff --git a/files/ja/web/html/element/picture/index.html b/files/ja/web/html/element/picture/index.html new file mode 100644 index 0000000000..aa5e06a1f2 --- /dev/null +++ b/files/ja/web/html/element/picture/index.html @@ -0,0 +1,166 @@ +--- +title: ': 画像要素' +slug: Web/HTML/Element/picture +tags: + - Element + - Graphics + - HTML + - HTML embedded content + - Images + - Reference + - Web + - WebP + - picture +translation_of: Web/HTML/Element/picture +--- +
{{HTMLRef}}
+ +

HTML の <picture> 要素は、0個以上の {{HTMLElement("source")}} 要素と一つの {{HTMLElement("img")}} 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

+ +

ブラウザーは複数の <source> 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <picture> 要素に対応してない場合、 <img> 要素の {{htmlattrxref("src", "img")}} 属性で指定された URL が選択されます。選択された画像は <img> 要素が占有する領域に表示されます。

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

どの URL を読み込むかを選択するには、{{Glossary("user agent","ユーザーエージェント")}}はそれぞれの <source> 要素の {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, {{htmlattrxref("type", "source")}} 属性を調べて、現在のページのレイアウトや表示機器の能力に最も合う画像を検討します。

+ +

<img> 要素は2つの役割を担います。

+ +
    +
  1. 画像の寸法やその他の属性を記述します。
    2. +
  2. <source> 要素で利用可能な画像を提供できなかった場合の代替策を提供します。
    3. +
+ +

<picture> をよく使う場面は以下の通りです。

+ + + +

DPI の高い (高解像度の) ディスプレイのために高解像度版の画像を提供する場合は、代わりに {{htmlattrxref("srcset", "img")}} 属性を <img> に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 media 条件を明示的に書かなくてもよくなります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ
許可されている内容0個以上の {{HTMLElement("source")}} 要素、その後に1個の {{HTMLElement("img")}} 要素、任意でスクリプト対応要素と混在。
タグの省略{{no_tag_omission}}
許可されている親要素埋め込みコンテンツを含むことができるすべての要素。
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロール許可されている role なし
DOM インターフェイス{{domxref("HTMLPictureElement")}}
+ +

属性

+ +

この要素はグローバル属性のみを持ちます。

+ +

使用上のメモ

+ +

{{cssxref("object-position")}} プロパティを使用して、要素の枠内で画像の位置を調整したり、 {{cssxref("object-fit")}} プロパティを使用して、枠内に合わせるための画像の寸法を変更する方法を制御したりすることができます。

+ +
+

注: これらのプロパティは子の <img> 要素に用い、 <picture> 要素には用いないでください。

+
+ +

例

+ +

これらの例は、 {{HTMLElement("source")}} 要素の様々な属性がどのように <picture> 内の画像の選択を変更するかを示しています。

+ +

media 属性

+ +

media 属性はユーザーエージェントがそれぞれの {{HTMLElement("source")}} 要素を評価するメディア条件を (メディアクエリと同様に) 指定します。

+ +

メディア条件が false と評価された場合、 {{HTMLElement("source")}} 要素はスキップされ、 <picture> 内の次の要素が評価されます。

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

srcset 属性

+ +

{{htmlattrdef("srcset")}} 属性は、寸法に基づいた利用可能な画像のリストを提供するために使用します。

+ +

これは画像記述子のカンマ区切りのリストで構成されます。それぞれの画像記述子は画像の URL と、次のいずれかで構成されます。

+ + + +
<picture>
+  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
+  <source srcset="logo-480.png, logo-480-2x.png 2x">
+  <img src="logo-320.png" alt="logo">
+</picture>
+ +

type 属性

+ +

type 属性は、 {{HTMLElement("source")}} 要素の srcset 属性で与えられるリソース URL の MIME タイプを指定します。ユーザーエージェントが指定されたタイプに対応していない場合、その {{HTMLElement("source")}} 要素はスキップされます。

+ +
<picture>
+  <source srcset="logo.webp" type="image/webp">
+  <img src="logo.png" alt="logo">
+</picture>
+
+ +

仕様書

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

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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