path: root/files/ja/web/html/global_attributes/data-_star_/index.html

---
title: data-*
slug: Web/HTML/Global_attributes/data-*
tags:
  - Global attributes
  - HTML
  - Reference
translation_of: Web/HTML/Global_attributes/data-*
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p><strong><code>data-*</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は<strong>カスタムデータ属性</strong>と呼ばれる属性の組を作り、<a href="/ja/docs/Web/HTML" title="HTML">HTML</a> と、スクリプトによる <a href="/ja/docs/Web/API/Document_Object_Model" title="DOM">DOM</a> 表現との間で、固有の情報を交換できるようにします。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<p>すべてのカスタムデータは、属性を設定した要素の {{domxref("HTMLElement")}} インターフェイスを通して使用できます。 {{domxref("HTMLElement.dataset")}} プロパティがそれらへのアクセス手段を提供します。<br>
 <code>*</code> は、 <a href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">XML 名の作成規則</a>に加えて以下の制約に従う名前に置き換えることができます。</p>

<ul>
 <li>大文字小文字にかかわらず、名前を <code>xml</code> で始めてはならない。</li>
 <li>名前にセミコロン (<code>U+003A</code>) を含めてはならない。</li>
 <li>名前に大文字を含めてはならない。</li>
</ul>

<p>なお、 {{domxref("HTMLElement.dataset")}} プロパティは {{domxref("DOMStringMap")}} であり、またカスタムデータ属性名のハイフン (<code>U+002D</code>) はその次の文字を大文字化したもの (キャメルケース) に変換されるので、 <em>data-test-value</em> は <code>HTMLElement.dataset.testValue</code> (または <code>HTMLElement.dataset["<em>testValue</em>"]</code>) としてアクセスできます。</p>

<h3 id="Usage" name="Usage">使用方法</h3>

<p><code>data-*</code> 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "<a href="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93)">スプライト</a><em>"</em> を、単純な {{HTMLElement("img")}} 要素に <a href="/ja/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 属性といくつかの <code>data-*</code> 属性を設定したもので表すことができるでしょう。</p>

<pre class="brush: html notranslate">&lt;img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()"&gt;
</pre>

<p>もっと深い HTML のデータ属性の使用については、<a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使用</a>を参照してください。</p>

<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 WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "dom.html#element-attrdef-global-data", "data-*")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td>
  </tr>
 </tbody>
</table>

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

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

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

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

<ul>
 <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li>
 <li>これらの値を読み書きできる {{domxref("HTMLElement.dataset")}} プロパティ</li>
 <li><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使用</a></li>
</ul>