カスタムデータ属性(data-*)

カスタムデータ属性とは

カスタムデータ属性を使うと、要素ごとにデータを定義できます。定義形式は、以下のとおりです。

data-*="データ"

*部分は、任意の文字列でデータの名前を指定します。

例えば、p要素でdata-weather="晴れ"と定義すると、この「晴れ」というデータをCSSやJavaScriptで使うことができます。他のp要素でdata-weather="雨"と定義すると、「雨」というデータを使えるという訳です。

1つの要素に対して、複数のカスタムデータ属性を使うこともできます。

カスタムデータ属性はグローバル属性のため、すべてのHTML要素で使えます。

CSSでの利用例

カスタムデータ属性の利用例は、以下のとおりです。

<p data-comment="注意：">前に進む。</p>
<p data-comment="安全：">右に曲がる。</p>

CSSは、以下とします。attrでデータを取り出せます。

p::before {
  content: attr(data-comment);
}

上記により、「前に進む。」の前には「注意：」が表示され、「右に曲がる。」の前には「安全：」が表示されます。

カスタムデータ属性を使わない場合

比較のため、カスタムデータ属性を使わない場合、どのようになるかです。

例えば、p要素にクラスnoteを使うとします。

<p class="note">前に進む。</p>

また、CSSを以下とします。

.note::before {
  content: "注意：";
}

この場合、「前に進む。」の前に「注意：」が表示されますが、「安全：」を表示したい時は別のクラスが必要になります。

カスタムデータ属性を使うと、1つ1つCSSで定義しなくても、指定したデータを使って表示を変えることができます。

JavaScriptでの利用例

カスタムデータ属性は、JavaScriptでも利用できます。HTMLは、以下です。

<img src="image.png" id="enemy" data-hp="10" alt="敵キャラ">
<p id="enemy-hp">HP:</p>

<script>
let x = document.getElementById("enemy");
let y = document.getElementById("enemy-hp");
y.textContent = y.textContent + x.dataset.hp;
</script>

データは、dataset.データの名前(この例ではhp)で取り出せます。

上記では、画像の下にHP:10の数字が表示されます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。