path: root/files/ja/web/html/global_attributes/itemscope/index.html

---
title: itemscope
slug: Web/HTML/Global_attributes/itemscope
tags:
  - Attribute
  - Global attribute
  - HTML
  - HTML Microdata
  - Microdata
  - Reference
translation_of: Web/HTML/Global_attributes/itemscope
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

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

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

<div class="note">
<p><strong>注:</strong> <code>itemtype</code> 属性についての詳細は、 <a href="http://schema.org/Thing">http://schema.org/Thing</a> をご覧ください</p>
</div>

<h3 id="Simple_example" name="Simple_example">単純な例</h3>

<h4 id="HTML">HTML</h4>

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

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

<h4 id="Structured_data" name="Structured_data">構造化データ</h4>

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

<table class="standard-table">
 <tbody>
  <tr>
   <td rowspan="6">itemscope</td>
   <td>Itemtype</td>
   <td colspan="2">Movie</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>(itemprop name)</td>
   <td>(itemprop value)</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>director</td>
   <td>James Cameron</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>genre</td>
   <td>Science Fiction</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>name</td>
   <td>Avatar</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>https://youtu.be/0AY1XIkX7bY</td>
   <td>Trailer</td>
  </tr>
 </tbody>
</table>

<h3 id="itemscope_id_attributes" name="itemscope_id_attributes">itemscope id 属性</h3>

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

<h3 id="Example" name="Example">例</h3>

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

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

<h3 id="Results" name="Results">結果</h3>

<h4 id="HTML_2">HTML</h4>

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

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

<h4 id="Structured_data_2" name="Structured_data_2">構造化データ</h4>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="1" rowspan="14">itemscope</td>
   <td>itemtype</td>
   <td colspan="2" rowspan="1">Recipe</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>name</td>
   <td>Grandma's Holiday Apple Pie</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>image</td>
   <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>datePublished</td>
   <td>2009-11-05</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>description</td>
   <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>prepTime</td>
   <td>PT30M</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>cookTime</td>
   <td>PT1H</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>totalTime</td>
   <td>PT1H30M</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeYield</td>
   <td>1 9" pie (8 servings)</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeIngredient</td>
   <td>Thinly-sliced apples: 6 cups</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeIngredient</td>
   <td>White sugar: 3/4 cup</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>recipeInstructions</td>
   <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td colspan="2" rowspan="1">author [Person]</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>name</td>
   <td>Carol Smith</td>
  </tr>
  <tr>
   <td colspan="1" rowspan="3">itemscope</td>
   <td>itemprop[itemtype]</td>
   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>ratingValue</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>reviewCount</td>
   <td>35</td>
  </tr>
  <tr>
   <td colspan="1" rowspan="4">itemscope</td>
   <td>itemprop[itemtype]</td>
   <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>servingSize</td>
   <td>1 medium slice</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>calories</td>
   <td>250 cal</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>fatContent</td>
   <td>12 g</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>注</strong>: HTML からマイクロデータを抽出するには、 Google の<a href="https://developers.google.com/structured-data/testing-tool/">構造化データテストツール</a>が便利です。上の HTML で試してみてください。</p>
</div>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td>
   <td>{{Spec2('HTML Microdata')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.global_attributes.itemscope")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li>
 <li>マイクロデータに関連する他のグローバル属性:
  <ul>
   <li>{{htmlattrxref("itemid")}}</li>
   <li>{{htmlattrxref("itemprop")}}</li>
   <li>{{htmlattrxref("itemref")}}</li>
   <li>{{htmlattrxref("itemscope")}}</li>
   <li>{{htmlattrxref("itemtype")}}</li>
  </ul>
 </li>
</ul>