From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../html/global_attributes/itemscope/index.html | 290 +++++++++++++++++++++ 1 file changed, 290 insertions(+) create mode 100644 files/ja/web/html/global_attributes/itemscope/index.html (limited to 'files/ja/web/html/global_attributes/itemscope') diff --git a/files/ja/web/html/global_attributes/itemscope/index.html b/files/ja/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..0f6f51923a --- /dev/null +++ b/files/ja/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,290 @@ +--- +title: itemscope +slug: Web/HTML/Global_attributes/itemscope +tags: + - Attribute + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemscope は論理型のグローバル属性で、関連付けられたメタデータのスコープを定義します。 itemscope 属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。関連する属性である {{htmlattrxref("itemtype")}} は、アイテム及びそのプロパティの文脈を記述する語彙 (schema.org など) の妥当な URL を指定するために使用されます。以下のそれぞれの例では、語彙は schema.org からのものです。

+ +

あらゆる HTML 要素に itemscope 属性を設定することができます。 itemscope 要素が itemtype を持たない場合は、関連付けられた itemref を持つ必要があります。

+ +
+

注: itemtype 属性についての詳細は、 http://schema.org/Thing をご覧ください

+
+ +

単純な例

+ +

HTML

+ +

以下の例では、 itemscope 属性を指定しています。この例では itemtype を "http://schema.org/Movie" に設定し、三つの関連する itemprop 属性を定義します。

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
+</div>
+
+ +

構造化データ

+ +

以下の表は前の例の構造化データを示しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgenreScience Fiction
itempropnameAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer
+ +

itemscope id 属性

+ +

要素に itemscope 属性を指定したとき、新しいアイテムが作成されます。アイテムは名前と値の組のグループで構成されます。 itemscope 属性及び itemtype 属性のついた要素には、 {{htmlattrxref("id")}} 属性を指定することもできます。 id 属性は新しいアイテムにグローバル識別子を設定するために使用することができます。グローバル識別子によって、アイテムをウェブ中のページにあるほかのアイテムに結び付けることができます。

+ +

例

+ +

以下の例には四つの itemscope 属性があります。それぞれの itemscope 属性は、対応する itemtype 属性のスコープを設定しています。以下の例にある Recipe, AggregateRating, NutritionInformation の itemtype は、レシピのための schema.org 構造化データの一部であり、最初の itemtype, http://schema.org/Recipe として定義されています。

+ +
<div itemscope itemtype="http://schema.org/Recipe">
+  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+  <img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50" />
+  <p>
+    By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+      <span itemprop="name">Carol Smith</span>
+    </span>
+  </p>
+  <p>
+    Published: <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</time>
+  </p>
+  <span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span>
+  <br>
+  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
+    <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews
+  </span>
+  <br>
+  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time><br>
+  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hou</time>r<br>
+  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time><br>
+  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span><br>
+  <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
+    Serving size: <span itemprop="servingSize">1 medium slice</span><br>
+    Calories per serving: <span itemprop="calories">250 cal</span><br>
+    Fat per serving: <span itemprop="fatContent">12 g</span><br>
+  </span>
+  <p>
+    Ingredients:<br>
+    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+    ...
+  </p>
+  Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
+    ...
+  </div>
+</div>
+ +

結果

+ +

HTML

+ +

以下のものは、先ほどのコードの例を表示するものです。

+ +

{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}

+ +

構造化データ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeRecipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor [Person]
itempropnameCarol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.0
itempropreviewCount35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g
+ +
+

注: HTML からマイクロデータを抽出するには、 Google の構造化データテストツールが便利です。上の HTML で試してみてください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}}
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.itemscope")}}

+ +

関連情報

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