【HTML5・CSS3】data属性の使い方とは？JavaScriptで値を取得・変更する方法も解説

HTML5から、カスタムデータ属性と呼ばれるdata属性が追加されましたね。

属性自体を知ってはいても、「どんな属性なのかよく分からない」「実際に使うのは難しそう」と考えている方も多いのではないでしょうか？

今回は、HTMLのdata属性の使い方をマスターしたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLのdata属性の記述方法が分かり、CSSやスクリプトなどの操作が快適になりますよ。

ぜひ最後まで読んでくださいね！

data属性とは？

data属性は、HTMLの要素内に指定することができ、その要素の情報を格納することができます。

ブラウザには表示されないため、ユーザーにはあまり関係がないですが、Webサイトの開発者にとっては、作業効率を上げる便利な属性になります。

HTML5より前は、要素の情報を格納するときに主にclass属性などを使っていました。

ただし、class属性は個別のスタイルを適用するためのもので、情報を格納する目的で使用すべきではない、といった部分が問題になっていました。

また、情報が増えるにつれて、class名の数も増えてしまい、JavaScriptからの情報へのアクセスが困難になる欠点もありました。

data属性が登場したことで、これらの問題を避けることができるようになったのです。

HTMLでの記述方法

data属性はHTMLのタグ内に属性として追加します。

例えば、レストランのリストを紹介するサイトで、以下のように書いたとします。

<ul>
  <li data-type="french" data-distance="2miles">
    レストラン名
  </li>
  <li data-type="italian" data-distance="3miles">
    レストラン名
  </li>
  <li data-type="french" data-distance="7miles">
    レストラン名
  </li>
</ul>

こうすることで、ユーザーがレストランの種類を絞り込んで検索したり、距離が近い順にソートしたりするときに、data属性の情報を使用して表示させることができます。

data属性に使える文字は以下のものです。

大文字は使用できません。

また、data属性を使うときには、他の属性で適用できない場合のみです。

class属性のように、スタイル目的でdata-classと指定するのは、間違いなので注意しましょう。

CSSでdata属性を扱う

CSSでdata属性を扱う方法は2つあります。

1つは、attr関数を用いて、CSSのコンテンツで使用する方法です。

以下のようにHTMLを記述します。

<span data-tooltip="HyperText Markup Language">HTML</span>

attr関数を用いて、 CSSを書きます

span::after {
  display:none;
  content: attr(data-tooltip);
}
span:hover::after {
  display: block;
}

疑似要素である「:after」を使って、追加したい情報をユーザーに示すことができます。

上記ではマウスをホバーさせたときに、data-tooltipの値が表示されます。

もう1つは、属性セレクタを用いて、スタイルを個別に設定する方法です。

article[data-number='3'] {
  background: pink;
}
article[data-number='4'] {
  background: blue;
}

上記では、data属性の情報に応じて、背景色を変えています。

この後に紹介するJavaScriptでdata属性の値を変更する方法を使って、要素に適用するスタイルを変更することができます。

JavaScriptでdata属性を扱う

JavaScriptを使ってdata属性の値を取得・変更したり、入力したりすることができます。

<article
  id = "restaurant"
  data-number = "3"
  data-type = "italian"
  data-distance = "3miles">
...
</article>

JavaScriptでは、以下のように記述します。

var restaurant = document.getElementById('restaurant');
number = restaurant.dataset.number; // "3"
type = restaurant.dataset.type; // "italian"
distance = restaurant.dataset.distance; // "3miles"

document.getElementById()を使用してid値を持つ要素のドキュメントを取得し、datasetを使ってdata属性の値を取得しています。

この文字列をプログラム内で使用して出力させることもできますし、以下のように値を設定しなおすこともできます。

restaurant.dataset.number = "4";
restaurant.dataset.type = "french";

要素に新しく別の属性を追加することも可能です。

restaurant.dataset.name = "King of Beasts";

JavaScriptでdata属性の値を操作したいときに、参考にしてみてくださいね。

まとめ：CSSやJavaScriptなどで活躍するdata属性

今回は、HTML5のdata属性について、特徴や使い方を解説してきました。

CSSやJavaScriptなどでの使用方法も紹介しましたね。

JavaScriptなどのプログラム内でデータを扱う際に重宝する機能ですので、ぜひ抑えておきましょう。

今回の記事が参考になれば幸いです。