CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。

data-*属性とは？

data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type="beverages" のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セレクタや attr() 関数でその値を利用できます。

例1：JavaScriptでdata-*属性の値を取得する

次の例では、定義リストの各項目（dt要素）に data-food-type 属性を設定し、マウスオーバーした際にJavaScriptでその値を読み取って説明文を動的に表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
dl {
   margin: 2%;
}
p {
   width: 60%;
   background-color: lightgreen;
   padding: 2%;
   color: white;
   text-align: center;
}
dt {
   font-weight: bold;
}
dt:hover {
   cursor: pointer;
}
dd {
   font-style: italic;
}
</style>
</head>
<body>
<dl>
<dt onmouseover="showDescription(this)" data-food-type="beverages">Tea</dt>
<dd>Hot Spicy Tea or Ice Lemon Tea</dd>
<dt onmouseover="showDescription(this)" data-food-type="snacks">Toast</dt>
<dd>Hot Garlic Butter Toast</dd>
</dl>
<p>(食品にマウスオーバーしてください)</p>
</body>
<script>
function showDescription(food) {
   let foodType = food.getAttribute("data-food-type");
   document.querySelector('p').textContent = ("We have " + food.innerHTML + " in " + foodType + ".");
}
</script>
</html>

実行結果

「Tea」にマウスオーバーすると「We have Tea in beverages.」、「Toast」にマウスオーバーすると「We have Toast in snacks.」というように、data-*属性に格納された分類情報が画面に表示されます。

CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

例2：CSSのattr()関数でdata-*属性の値を表示する

CSSだけでもdata-*属性の値を活用できます。次の例では、section[data-number='77'] という属性セレクタで特定の要素だけにスタイルを適用しつつ、疑似要素の content プロパティで attr() 関数を使い、data-user と data-number の値を画面上に表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
section {
   margin: 8%;
   box-shadow: inset 0 0 20px red;
   width: 300px;
   padding: 2%;
}
section[data-number='77'] {
   height: 120px;
   border-radius: 15px;
}
section::before {
   content: attr(data-user);
   font-size: 1.2em;
}
section::after {
   content: attr(data-number);
}
</style>
</head>
<body>
<section data-number="77" data-user="Client">
<p>Demo Text</p>
</section>
</body>
</html>

実行結果

data-number="77" を持つsection要素には角丸と高さが適用され、要素の前には「Client」、後ろには「77」がそれぞれ表示されます。このように、HTMLを変更せずにCSSだけでdata-*属性の値を条件分岐や表示に使えるのが大きなメリットです。

CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

まとめ

data-*属性を使えば、HTML要素に意味のあるカスタムデータを自由に持たせることができます。JavaScriptの getAttribute() / dataset で動的な処理に、CSSの属性セレクタや attr() 関数でスタイルやコンテンツの表示に活用できるため、マークアップの柔軟性と保守性が大きく向上します。

  1. CSSイメージスプライトの利点とは？HTTPリクエスト削減でサイト表示を高速化する方法

    Webサイトのパフォーマンス改善テクニックのひとつが「CSSイメージスプライト」です。複数の画像を1枚の画像ファイルにまとめることで、ブラウザがサーバーへ送信するHTTPリクエストの数を大幅に減らせます。リクエスト数が減ればサイトの読み込み時間は短縮され、ページの表示速度向上につながります。さらに、画像があらかじめ読み込まれた状態になるため、マウスオーバーなどのイベントで画像を切り替える際も動作がスムーズになり、画像の読み込み遅延によるちらつきを防ぐことができます。イメージスプライトとは？イメージスプライトとは、複数の小さな画像（アイコンなど）を1枚の大きな画像にまとめたものです。CSSのba

  2. CSSでツールチップを作る方法｜サンプルコード付きで解説

    CSSツールチップとは？ ツールチップ（Tooltip）は、要素に追加情報を設定するためのUIパーツです。訪問者がマウスポインターを要素の上に重ねると、Webページ上に補足説明がポップアップ表示されます。JavaScriptに頼らず、CSSだけでも手軽に実装できるのが大きな魅力です。 以下は、CSSのみを使用してツールチップを構築するサンプルコードです。 サンプルコード <!DOCTYPE html> <html> <style> body {    font-family: "Segoe UI", Tahoma, G