---

【入門】CSSとdata属性でWebサイトをリッチにする方法

Webサイトの見た目を魅力的に、そしてユーザー体験を向上させるためにCSSは欠かせない技術です。しかし、単に要素の色や形を整えるだけでなく、ユーザーのアクションやアプリケーションの状態に応じて、より動的な、あるいは情報に基づいた表現を実現したいと考えることもあるでしょう。

この記事では、HTMLの標準機能である「data属性」とCSSを組み合わせることで、どのようにWebサイトの表現力を高め、よりリッチなインターフェースを構築できるのかを、初心者の方にも分かりやすく詳細に解説します。

約5000語というボリュームで、data属性の基本から、CSSセレクタ、擬似要素、CSS変数、アニメーションとの組み合わせ、実践的な活用例、そして使用上の注意点まで、網羅的に掘り下げていきます。

1. はじめに：なぜdata属性とCSSなのか？

1.1 Webサイト表現におけるCSSの力

現代のWebデザインにおいて、CSS（Cascading Style Sheets）はレイアウト、色、タイポグラフィ、アニメーションなど、視覚的な表現のあらゆる側面を担っています。単に要素を装飾するだけでなく、レスポンシブデザインを実現したり、インタラクティブな要素に動きをつけたりと、CSSの進化は止まりません。

しかし、CSSだけで表現できることには限界があります。特に、要素が「どのような状態にあるか（例：アクティブ、無効、開いている、閉じている）」や、「どのような種類の情報を持っているか（例：プライマリボタン、セカンダリボタン、警告メッセージ）」といった要素固有のメタデータや状態に基づいたスタイリングは、単純なクラス名だけでは管理が煩雑になりがちです。

1.2 data属性とは何か？

ここで登場するのがHTMLのdata属性です。data属性は、HTML5で導入された機能で、すべてのHTML要素にカスタムデータ属性を指定することを可能にします。この属性は、ページやアプリケーション固有のカスタムデータを、標準的な属性や要素に収める場所がない場合に利用するために設計されました。

data属性は、data-というプレフィックスに続けて任意の名前（ハイフン区切り推奨）をつけた形式で記述します。例えば、<div data-state="open">...</div> のように使用します。

1.3 data属性がリッチな表現に役立つ理由

data属性に要素の状態や種類などの情報を格納することで、その情報をCSSから参照し、スタイリングに活用できるようになります。これにより、以下のようなメリットが生まれます。

• セマンティックな状態管理: クラス名に「active」や「disabled」といった状態を含めるのではなく、data-state="active"のように明確に状態を表現できます。これにより、HTML構造がより分かりやすくなります。
• CSSからの状態参照: CSSの属性セレクタを使用することで、特定のdata属性やその値を持つ要素だけをピンポイントでスタイリングできます。
• JavaScriptとの連携強化: JavaScriptからdata属性の値を簡単に読み書きできます。JavaScriptで要素の状態を変更すると、それに合わせてCSSのスタイルが自動的に適用される、という連携が容易になります。
• スタイルの分離: 見た目に関する情報（色、サイズなど）はCSSに、要素の状態や種類といったメタデータはHTMLのdata属性に、そして状態変化のロジックはJavaScriptに、と役割を分離しやすくなります。

これらの特性を活かすことで、より管理しやすく、柔軟で、表現豊かなWebサイトやWebアプリケーションを構築できるようになります。この記事では、このdata属性とCSSを組み合わせる具体的な方法を、豊富なコード例とともに学んでいきましょう。

2. data属性の基本を知る

data属性をCSSで活用するためには、まずその基本的な使い方を理解しておく必要があります。

2.1 data-* 属性の定義と構文

data属性は、HTML5の仕様で定められたカスタムデータ属性です。すべてのHTML要素（標準要素だけでなく、カスタム要素も含む）に追加できます。

構文は非常にシンプルです。

• 属性名は data- で始める必要があります。
• data- に続く名前には、XML Name Productionで許容される任意の文字を含めることができますが、実際にはハイフン（-）で区切られた小文字の単語を使用するのが一般的で推奨されています（例: data-user-id, data-product-price）。大文字を使用しても構いませんが、JavaScriptのdatasetプロパティでアクセスする際にキャメルケースに変換されるため、一貫性のため小文字とハイフンを使用するのが良いでしょう。
• 属性値は任意の文字列です。

2.2 HTMLでの記述方法

HTML要素の開始タグ内に、他の属性（class, id, src, hrefなど）と同じように記述します。

“`html

Data属性の例

送信する

新しいメッセージがあります。

• テクノロジー
• サイエンス
• テクノロジー
• アート

“`

この例では、div要素にdata-user-idとdata-user-role、button要素にdata-button-typeとdata-is-disabled、p要素にdata-message-status、ul要素にdata-list-filter、li要素にdata-item-categoryというdata属性がそれぞれ記述されています。

2.3 JavaScriptからのアクセス方法 (dataset プロパティ)

data属性は、主にJavaScriptからのアクセスを想定して導入されました。各要素のDOMインターフェースには、datasetというプロパティが用意されています。

datasetは、その要素に定義されているすべてのdata-*属性を含む DOMStringMap オブジェクトです。data- プレフィックスを除いた属性名をキーとして、属性値を値として格納しています。

重要なのは、data- に続く属性名がハイフンで区切られている場合（例: data-user-role）、dataset プロパティでは自動的にキャメルケースに変換される点です（例: userRole）。

“`javascript
const userDiv = document.querySelector(‘div[data-user-id]’);

console.log(userDiv.dataset); // -> { userId: “12345”, userRole: “admin” }
console.log(userDiv.dataset.userId); // -> “12345”
console.log(userDiv.dataset.userRole); // -> “admin”

const sendButton = document.querySelector(‘button[data-button-type]’);
console.log(sendButton.dataset.buttonType); // -> “primary”
console.log(sendButton.dataset.isDisabled); // -> “false” (文字列であることに注意)

// data属性の値を変更する
sendButton.dataset.isDisabled = “true”;
console.log(sendButton.dataset.isDisabled); // -> “true”

// data属性を追加する
sendButton.dataset.customAttribute = “someValue”;
console.log(sendButton.dataset.customAttribute); // -> “someValue”
// HTML要素には data-custom-attribute=”someValue” が追加される

// data属性を削除する
delete sendButton.dataset.buttonType;
console.log(sendButton.dataset.buttonType); // -> undefined
// HTML要素から data-button-type 属性が削除される
“`

このように、JavaScriptからdatasetプロパティを使うことで、data属性の値を簡単に読み取ったり、変更したり、追加・削除したりできます。このJavaScriptによるdata属性の変更が、CSSでのスタイリング変更のトリガーとなります。

2.4 data属性に格納できるデータ型

data属性の値は、常に文字列として扱われます。たとえHTMLで数値や真偽値のように記述しても、JavaScriptのdatasetで取得した際は文字列になります。

“`html

“`

“`javascript
const element = document.querySelector(‘div[data-count]’);
console.log(typeof element.dataset.count); // -> “string”
console.log(element.dataset.count); // -> “10”
console.log(parseInt(element.dataset.count)); // -> 10 (数値として使いたい場合は変換が必要)

console.log(typeof element.dataset.isActive); // -> “string”
console.log(element.dataset.isActive); // -> “true”
console.log(element.dataset.isActive === “true”); // -> true (真偽値として使いたい場合は文字列比較が必要)
“`

JavaScriptでdata属性の値を数値や真偽値として扱いたい場合は、parseInt(), parseFloat(), 文字列比較などの方法で明示的に型変換を行う必要があります。

2.5 data属性の命名規則に関する補足

前述の通り、data- に続く名前はハイフン区切りの小文字が推奨されます。これは、JavaScriptのdatasetプロパティとの連携をスムーズにするためです。

例:
* data-user-name -> dataset.userName
* data-order-detail-id -> dataset.orderDetailId

もしハイフン区切りでない場合や、大文字が含まれる場合は、JavaScriptのdatasetプロパティのキーがどのように変換されるかに注意してください。基本的にはハイフンの次の文字が大文字になるキャメルケースに変換されます。

例:
* data-username -> dataset.username (ハイフンがないのでそのまま)
* data-UserName -> dataset.userName (最初の文字だけ小文字、以降のハイフンはキャメルケース)
* data-user_name -> dataset.user_name (アンダースコアは変換されない)

一貫性のためにも、data-[小文字単語]-[小文字単語] の形式で記述することを強く推奨します。

3. CSSセレクタでのdata属性の活用

data属性の真価は、CSSと組み合わせることで発揮されます。CSSの属性セレクタを使用すると、要素に付与されたdata属性の有無やその値に基づいてスタイルを適用できます。

3.1 属性セレクタの基本

CSSには、要素の属性とその値に基づいて要素を選択するための属性セレクタが用意されています。主な属性セレクタの種類は以下の通りです。

• [attr] : attr属性を持つ要素を選択します。
• [attr="value"] : attr属性を持ち、その値が厳密に”value”である要素を選択します。
• [attr~="value"] : attr属性を持ち、その値がスペース区切り単語のリストであり、そのリストの中に”value”という単語が含まれる要素を選択します。（主にclass属性で使われますが、data属性でも理論上は使用可能）
• [attr|="value"] : attr属性を持ち、その値が”value”であるか、または”value-“で始まる要素を選択します。（主に言語コードの属性などで使われます）
• [attr^="value"] : attr属性を持ち、その値が”value”で始まる要素を選択します。
• [attr$="value"] : attr属性を持ち、その値が”value”で終わる要素を選択します。
• [attr*="value"] : attr属性を持ち、その値の中に”value”という文字列がどこかに含まれる要素を選択します。

これらの属性セレクタをdata-*属性名に適用することで、柔軟なスタイリングが可能になります。

3.2 data-* 属性に対する属性セレクタの適用例

先ほどのHTML例を使って、data属性に基づいたスタイリングを見てみましょう。

“`html
Primary Button
Secondary Button
Danger Button

情報メッセージ

警告メッセージ

エラーメッセージ

“`

“`css
/ data-button-type 属性を持つすべての要素 /
button[data-button-type] {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}

/ data-button-type=”primary” の要素 /
button[data-button-type=”primary”] {
background-color: #007bff;
color: white;
}

/ data-button-type=”secondary” の要素 /
button[data-button-type=”secondary”] {
background-color: #6c757d;
color: white;
}

/ data-button-type=”danger” の要素 /
button[data-button-type=”danger”] {
background-color: #dc3545;
color: white;
}

/ data-state=”closed” の要素は非表示 /
div[data-state=”closed”] {
display: none;
}

/ data-validation-status=”invalid” の input 要素に赤枠 /
input[data-validation-status=”invalid”] {
border: 2px solid red;
}

/ data-notification-level 属性が “warning” または “error” で始まる要素 /
p[data-notification-level^=”warn”],
p[data-notification-level^=”erro”] { / または |=”warn” で単語一致も可 /
font-weight: bold;
}

/ data-notification-level=”warning” の要素に黄色背景 /
p[data-notification-level=”warning”] {
background-color: yellow;
}

/ data-notification-level=”error” の要素に赤背景 /
p[data-notification-level=”error”] {
background-color: salmon;
}
“`

この例からわかるように、data属性の値に基づいて、要素ごとに異なるスタイルを適用できます。これにより、クラス名を大量に定義することなく、HTMLの属性値だけで要素の種類や状態を表現し、それに応じたスタイリングを実現できます。

3.3 複数のdata属性を組み合わせたセレクタ

CSSセレクタは組み合わせることが可能です。複数のdata属性や、data属性と他のセレクタ（タグ名、クラス名、IDなど）を組み合わせて、より詳細な条件で要素を選択できます。

“`html
Large Primary
Disabled Secondary

“`

“`css
/ data-button-type=”primary” かつ data-size=”large” の button 要素 /
button[data-button-type=”primary”][data-size=”large”] {
padding: 15px 30px; / 大きいサイズ /
font-size: 1.2em;
}

/ data-button-type=”secondary” かつ data-state=”disabled” の button 要素 /
button[data-button-type=”secondary”][data-state=”disabled”] {
opacity: 0.5;
cursor: not-allowed;
}

/ class=”card” かつ data-theme=”dark” の div 要素 /
div.card[data-theme=”dark”] {
background-color: #333;
color: white;
border: 1px solid #555;
padding: 20px;
margin: 10px;
}

/ class=”card” かつ data-theme=”light” の div 要素 /
div.card[data-theme=”light”] {
background-color: #f8f9fa;
color: #212529;
border: 1px solid #ccc;
padding: 20px;
margin: 10px;
}

/ ダークテーマのカード内の h3 要素 /
div.card[data-theme=”dark”] h3 {
color: #add8e6; / 薄い青 /
}
“`

このように、複数のdata属性を組み合わせたり、既存のクラス名やタグ名と併用したりすることで、より複雑な条件に基づいたスタイリングを柔軟に実現できます。これにより、コンポーネントの多様なバリエーションや状態を表現する際に、CSSクラスの命名規則が肥大化するのを防ぎ、構造を整理しやすくなります。

4. data属性と擬似要素（::before, ::after）の組み合わせ

CSSの擬似要素である::beforeや::afterは、要素のコンテンツの直前や直後に装飾的なコンテンツを挿入するために使用されます。これらの擬似要素とdata属性を組み合わせることで、要素のdata属性値に基づいたテキストやアイコンなどの情報を、HTML構造自体を modificere ことなく表示できます。

4.1 擬似要素の基本

::before と ::after は、contentプロパティと組み合わせて使用します。contentプロパティには、挿入したいテキスト文字列、画像（url()）、カウンター、またはattr()関数などを指定できます。

例:
css
p::before {
content: "注意: ";
font-weight: bold;
color: orange;
}
このCSSは、すべての<p>要素の冒頭に「注意: 」というテキストを挿入します。

4.2 contentプロパティでのattr()関数

attr()関数は、選択された要素の指定された属性値を取得し、それを擬似要素のcontentプロパティの値として使用できるようにします。CSS Values and Units Module Level 3の時点では、attr()関数はcontentプロパティでのみ使用が標準化されていました。他のCSSプロパティ（例: width, color, font-size）で属性値を利用する仕様も提案されていましたが、広く実装・標準化されているのはcontentプロパティのみです。

attr()関数は attr(attribute-name) の形式で記述します。ここで attribute-name は取得したい属性の名前です。

4.3 content: attr(data-label) のような使い方

attr()関数を使ってdata属性の値を取得し、擬似要素で表示する典型的な例を見てみましょう。

“`html
ホバーミー

• アイテム A
• アイテム B

“`

“`css
/ ツールチップのスタイル /
button[data-tooltip] {
position: relative; / 擬似要素の基準にする /
}

button[data-tooltip]::after {
content: attr(data-tooltip); / data-tooltip 属性の値を表示 /
position: absolute;
bottom: 100%; / ボタンの上に配置 /
left: 50%;
transform: translateX(-50%); / 中央揃え /
background-color: black;
color: white;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap; / テキストの折り返しを防ぐ /
opacity: 0; / 初期状態は非表示 /
visibility: hidden;
transition: opacity 0.3s ease; / フェードインアニメーション /
pointer-events: none; / ツールチップ自体へのポインターイベントを無効にする /
}

/ ホバー時にツールチップを表示 /
button[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}

/ data-label 属性を持つ div 要素の前にラベルを表示 /
div[data-label]::before {
content: attr(data-label); / data-label 属性の値を表示 /
display: inline-block;
background-color: red;
color: white;
font-size: 0.8em;
padding: 2px 5px;
border-radius: 3px;
margin-right: 5px;
vertical-align: middle;
}

/ data-item-id をリストアイテムのインデックスとして表示 (CSSカウンターと組み合わせる例) /
/ 注: attr() をカウンターの値として直接使うのは難しい場合がある /
/ より簡単な例: data属性値をそのまま表示 /
li[data-item-id]::after {
content: ” (ID: ” attr(data-item-id) “)”; / data-item-id 属性の値を表示 /
color: #888;
font-size: 0.9em;
margin-left: 5px;
}
“`

この例では、data-tooltip属性の値がボタンのホバー時にツールチップとして表示され、data-label属性の値が要素の前にラベルとして表示されています。このように、HTMLのdata属性にメタデータを記述しておけば、CSSだけでそのデータを引っ張ってきて画面上に表示させることができます。これは、情報と表示を分離する上で非常に強力なテクニックです。

4.4 テキスト以外のコンテンツ表示（アイコンフォントなど）

contentプロパティには、テキストだけでなく、アイコンフォントのコードポイントや画像を指定することも可能です。data属性にアイコンの種類などの情報を格納し、それに基づいて異なるアイコンを表示させることができます。

例えば、要素の状態（成功、失敗、情報）を示すアイコンを表示したい場合：

“`html

処理が成功しました。

処理中にエラーが発生しました。

これは情報メッセージです。

“`

Font Awesomeなどのアイコンフォントを使用する場合、各アイコンには固有のUnicodeコードポイントがあります（例: チェックマークは \f00c、バツマークは \f00d）。data属性にこのコードポイントを格納しておき、CSSでそれを参照できます。

“`html

処理が成功しました。

処理中にエラーが発生しました。

これは情報メッセージです。

“`

“`css
/ アイコンフォントのスタイルを定義 (Font Awesomeの場合) /
p[data-status]::before {
font-family: “Font Awesome 6 Free”; / 使用するフォントファミリー /
font-weight: 900; / Font Awesome Free の Solid スタイル /
margin-right: 5px;
}

/ data-icon 属性の値を content に指定 /
p[data-status]::before {
content: attr(data-icon);
}

/ ステータスごとの色付け /
p[data-status=”success”] { color: green; }
p[data-status=”success”]::before { color: green; }

p[data-status=”error”] { color: red; }
p[data-status=”error”]::before { color: red; }

p[data-status=”info”] { color: blue; }
p[data-status=”info”]::before { color: blue; }
“`

この例では、data-icon属性にアイコンのコードポイントを直接格納しています。CSSのcontent: attr(data-icon)は、この文字列をそのまま表示しようとしますが、CSSパーサーはエスケープシーケンス（\f00cなど）を解釈するため、結果としてアイコンが表示されます。これにより、要素のHTMLにはステータス名とアイコンコードという「情報」だけを記述し、実際のアイコン表示はCSSに任せることができます。

4.5 注意点：attr()の対応状況

前述の通り、attr()関数はCSS Values and Units Module Level 3の時点ではcontentプロパティでのみ標準化されています。CSS Level 4では、他のプロパティでも使用できるように拡張する提案がありましたが、執筆時点（2023年）ではブラウザの実装状況が限定的です。したがって、data属性の値を要素の幅や色などのスタイル値として直接利用したい場合は、後述するCSS変数（カスタムプロパティ）を使用するのが現在の主流であり推奨される方法です。

5. data属性とCSS変数（カスタムプロパティ）の組み合わせ

CSS変数（カスタムプロパティ）は、CSS内で再利用可能な値を定義するための強力な機能です。data属性とCSS変数を組み合わせることで、HTMLのdata属性に定義された値をCSSのスタイルに動的に反映させることが可能になります。これは、テーマ切り替え、コンポーネントのカスタマイズ、JavaScriptとCSSの連携において非常に有用です。

5.1 CSS変数（カスタムプロパティ）の基本

CSS変数は、-- で始まる任意の名前で定義します。値はCSSのプロパティ値として有効なものであれば何でも格納できます。定義はセレクタのブロック内で行われ、そのセレクタが適用される要素とその子孫要素から参照可能になります。

“`css
:root { / ドキュメント全体で利用可能な変数を定義 /
–primary-color: #007bff;
–text-color: #333;
}

.my-component {
–component-background: #f0f0f0; / .my-component とその子孫で利用可能 /
background-color: var(–component-background); / 変数を参照 /
color: var(–text-color); / :root で定義された変数を参照 /
}

button {
background-color: var(–primary-color);
color: white;
}
``
変数の値はvar(–variable-name)関数を使って参照します。var()関数にはフォールバック値（変数が未定義だった場合に代わりに使われる値）を指定することも可能です（例:var(–undefined-var, red)`）。

5.2 data属性の値をCSS変数として利用する方法

CSSでは、要素のスタイルを定義する際に、特定の要素に対してその要素自身の属性値を変数の値として設定することができます。この仕組みをdata属性に適用します。

構文は以下のようになります。

css
element-selector {
--custom-variable-name: attr(data-attribute-name);
}
注意点: 前述の通り、attr()関数をcontentプロパティ以外で使用するのは標準化が進んでいません（CSS Values and Units Module Level 4の提案では可能になりましたが、ブラウザサポートにばらつきがあります）。

しかし、JavaScriptを使えば、この問題を回避し、data属性の値をCSS変数として設定することが容易にできます。

JavaScriptを使った方法:

1. JavaScriptで要素のdata属性の値を取得します。
2. その値を、要素のスタイルプロパティとして、CSS変数に設定します（element.style.setProperty('--variable-name', value)）。

この方法が、現在のブラウザ環境でdata属性値を動的なスタイル値として利用する最も一般的で堅牢な方法です。

例を見てみましょう。要素の背景色をdata属性で指定し、それをCSS変数経由で適用する例です。

“`html

“`

css
/* CSS側では、カスタムプロパティの値を使用するだけ */
.box {
width: 100px;
height: 100px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
/* ここで、要素固有の --box-bg-color 変数を参照する */
background-color: var(--box-bg-color, gray); /* フォールバック値としてグレーを指定 */
color: #333;
font-weight: bold;
}

javascript
// JavaScriptを使って、各要素の data-bg-color 属性値を --box-bg-color 変数に設定する
document.querySelectorAll('.box').forEach(box => {
const bgColor = box.dataset.bgColor; // data-bg-color 属性の値を取得
if (bgColor) {
box.style.setProperty('--box-bg-color', bgColor); // CSS変数に値を設定
}
});

この方法により、HTMLに色情報を（data-bg-colorとして）記述しておけば、JavaScriptが一括してその値を読み込み、各要素のCSS変数に設定してくれます。CSS側は、その変数を使用するだけで、動的な背景色設定が実現できます。色の値はHTML側で管理されているため、デザインのバリエーションなどをHTMLで記述するだけで、CSSを変更することなく対応できます。

5.3 JavaScriptでdata属性を変更し、CSSを通してスタイリングを動的に変更する

CSS変数とdata属性の組み合わせが特に強力になるのは、JavaScriptでdata属性の値を動的に変更し、それに応じてスタイルが変化するケースです。

例：ユーザーがボタンをクリックすると、要素のテーマが切り替わる

“`html
テーマを切り替える

“`

“`css
/ デフォルト（ライトテーマ）のCSS変数 /
.content {
–text-color: #333;
–background-color: #ffffff;
–border-color: #ccc;

padding: 20px;
border: 1px solid var(--border-color);
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; /* スムーズな切り替え */

}

/ data-theme=”dark” の場合に、要素固有のCSS変数を上書き /
.content[data-theme=”dark”] {
–text-color: #eee;
–background-color: #444;
–border-color: #666;
}

/ data-theme=”contrast” の場合に、要素固有のCSS変数を上書き /
.content[data-theme=”contrast”] {
–text-color: yellow;
–background-color: black;
–border-color: yellow;
}

/ ボタンのスタイル（おまけ） /

theme-switcher {

margin-bottom: 20px;
padding: 10px;
cursor: pointer;

}
“`

“`javascript
const themeSwitcher = document.getElementById(‘theme-switcher’);
const contentArea = document.querySelector(‘.content’);

themeSwitcher.addEventListener(‘click’, () => {
const currentTheme = contentArea.dataset.theme; // 現在のテーマを取得

let nextTheme;
if (currentTheme === 'light') {
    nextTheme = 'dark';
} else if (currentTheme === 'dark') {
    nextTheme = 'contrast';
} else {
    nextTheme = 'light';
}

// contentArea の data-theme 属性値を変更する
contentArea.dataset.theme = nextTheme;

// ボタンのテキストも更新する
themeSwitcher.textContent = `現在のテーマ: ${nextTheme} (クリックで変更)`;

});

// 初期表示時のボタンテキスト設定
themeSwitcher.textContent = 現在のテーマ: ${contentArea.dataset.theme} (クリックで変更);
“`

この例では、JavaScriptはボタンクリック時に.content要素のdata-theme属性値を変更するだけです。CSS側では、このdata-theme属性値に応じて、CSS変数--text-color, --background-color, --border-colorの値が切り替わるように定義しています。.content要素は常にこれらのCSS変数を使ってスタイルを適用するため、data-theme属性が変わるだけで、スタイルが自動的に切り替わります。

このアプローチの利点は、JavaScriptが直接スタイルプロパティを操作しない点です。JavaScriptは「要素の状態（この場合はテーマ）」だけを管理し、その状態に応じた「見た目」は全てCSSが担当します。これにより、関心の分離が明確になり、コードが読みやすく、保守しやすくなります。また、CSSでトランジションを設定しておけば、JavaScriptのコードを変更することなく、スムーズなアニメーションも実現できます。

6. data属性とCSSアニメーション・トランジション

前述の例でも少し触れましたが、data属性の状態変化をトリガーとして、CSSアニメーションやトランジションを適用することができます。これは、ユーザーインタラクションに対するフィードバックや、アプリケーションの状態変化を視覚的に伝えるのに非常に効果的です。

6.1 アニメーション・トランジションの基本

• トランジション (transition): プロパティ値の変化を、指定された時間とタイミング関数で滑らかにアニメーションさせます。特定の状態（例: :hover, .active クラス、[data-state="open"]）になったときにプロパティ値が変わる際に適用されます。
• アニメーション (animation): @keyframes ルールで定義された一連のスタイル変化を、要素に繰り返しまたは一度だけ適用します。より複雑な動きや、自動的に開始されるアニメーションに適しています。

6.2 data属性の状態変化をトリガーにしたトランジション

最も簡単なのは、data属性の値がJavaScriptによって変更された際に、その属性セレクタによって適用されるスタイルの変化にトランジションをかける方法です。

例：要素の表示/非表示をスムーズに切り替える

“`html
コンテンツを表示/非表示

“`

“`css

toggle-content {

max-height: 0; /* 閉じている状態 */
opacity: 0;
overflow: hidden;
transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* アニメーション対象のプロパティ */

}

/ data-visible=”true” の場合にスタイルを適用 /

toggle-content[data-visible=”true”] {

max-height: 500px; /* 開いている状態（十分大きな値） */
opacity: 1;

}

/ ボタンのスタイル（おまけ） /

toggle-button {

margin-bottom: 10px;
padding: 10px;
cursor: pointer;

}
“`

“`javascript
const toggleButton = document.getElementById(‘toggle-button’);
const toggleContent = document.getElementById(‘toggle-content’);

toggleButton.addEventListener(‘click’, () => {
const isVisible = toggleContent.dataset.visible === ‘true’;

// data-visible 属性値を切り替える
toggleContent.dataset.visible = isVisible ? 'false' : 'true';

// ボタンのテキストも更新（オプション）
toggleButton.textContent = isVisible ? 'コンテンツを表示' : 'コンテンツを非表示';

});

// 初期表示時のボタンテキスト設定
toggleButton.textContent = toggleContent.dataset.visible === ‘true’ ? ‘コンテンツを非表示’ : ‘コンテンツを表示’;
“`

この例では、#toggle-content要素のdata-visible属性をJavaScriptで"true"または"false"に切り替えています。CSSでは、[data-visible="true"]セレクタに対して要素が表示されるときのスタイル（max-height, opacity）を定義し、これらのプロパティにトランジションを設定しています。これにより、data-visibleの値が切り替わると、CSSが自動的にトランジションを適用し、スムーズな開閉アニメーションが実現します。

6.3 data属性の値に応じてアニメーションプロパティを切り替える

CSS変数と組み合わせることで、data属性の値に基づいてアニメーションやトランジションのパラメータ（時間、タイミング関数など）を動的に変更することも可能です。

“`html

“`

“`css
/ CSS変数でアニメーション時間を定義 /
.item {
–animation-time: 1s; / デフォルト値 /
padding: 10px;
margin: 10px;
background-color: lightblue;
width: 100px;
text-align: center;
animation: color-change var(–animation-time) infinite alternate; / 変数を使用 /
}

@keyframes color-change {
from { background-color: lightblue; }
to { background-color: coral; }
}
“`

javascript
// JavaScriptで data-animation-duration の値を CSS変数 --animation-time に設定
document.querySelectorAll('.item').forEach(item => {
const duration = item.dataset.animationDuration;
if (duration) {
item.style.setProperty('--animation-time', duration);
}
});

この例では、JavaScriptは各.item要素のdata-animation-duration属性値を読み込み、その要素のスタイルプロパティとして--animation-timeというCSS変数に設定しています。CSS側では、この--animation-time変数をanimation-durationプロパティの値として使用しています。これにより、HTMLのdata属性値を変更するだけで、各要素のアニメーション速度を個別に制御できます。

7. 実践的な活用例

これまでに学んだdata属性とCSSの組み合わせテクニックを、実際のWebサイトやアプリケーションでよく見られるUIコンポーネントに適用する例を見てみましょう。

7.1 コンポーネントの状態管理

多くのUIコンポーネントは、ユーザー操作やアプリケーションの状態に応じて見た目が変化します。data属性は、このような状態を管理するのに非常に適しています。

タブインターフェース

タブインターフェースは、複数のコンテンツパネルを切り替えて表示するUIです。通常、選択されているタブに対応するパネルのみが表示されます。

“`html

“`

“`css
/ タブボタンの基本スタイル /
.tab-button {
padding: 10px 15px;
border: 1px solid #ccc;
border-bottom: none;
background-color: #f0f0f0;
cursor: pointer;
margin-right: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transition: background-color 0.3s ease;
}

/ 選択状態のタブボタン /
.tab-button[data-state=”active”] {
background-color: #fff;
border-bottom: 1px solid #fff; / コンテンツ側の境界線と合わせる /
font-weight: bold;
}

/ タブパネルの基本スタイル /
.tab-panel {
border: 1px solid #ccc;
padding: 20px;
border-radius: 0 5px 5px 5px;
}

/ 非表示状態のタブパネル /
.tab-panel[data-state=”inactive”] {
display: none;
}
“`

“`javascript
const tabButtons = document.querySelectorAll(‘.tab-button’);
const tabPanels = document.querySelectorAll(‘.tab-panel’);

tabButtons.forEach(button => {
button.addEventListener(‘click’, () => {
const targetPanelSelector = button.dataset.tabTarget; // data-tab-targetから対応パネルのセレクタを取得

    // すべてのボタンとパネルの状態をリセット
    tabButtons.forEach(btn => btn.dataset.state = 'inactive');
    tabPanels.forEach(panel => panel.dataset.state = 'inactive');

    // クリックされたボタンと対応するパネルを active 状態にする
    button.dataset.state = 'active';
    document.querySelector(targetPanelSelector).dataset.state = 'active';
});

});

// 初期表示（最初のタブをアクティブにする）
// data-state=”active” がHTMLに初期設定されていることを前提とするか、JSで初期設定する
// 例: document.querySelector(‘.tab-button[data-state=”active”]’).click();
“`

この例では、タブボタンとタブパネルの両方にdata-state="active"またはdata-state="inactive"というdata属性を付与しています。JavaScriptは、クリックされたタブボタンのdata-tab-target属性から対象のパネルを特定し、関連するdata-state属性値を切り替えるだけです。CSSは、このdata-state属性値に基づいて要素の表示/非表示やボタンの背景色などを制御しています。JavaScriptは状態の管理に専念し、見た目はCSSに任せるという良い例です。

アコーディオンメニュー

アコーディオンは、クリックによってコンテンツ領域を開閉するUIです。

“`html

“`

“`css
.accordion-header {
width: 100%;
text-align: left;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: -1px; / ボーダーの重なりを防ぐ /
background-color: #f9f9f9;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s ease;
}

.accordion-header:hover {
background-color: #e9e9e9;
}

/ data-expanded=”true” のヘッダーに下線やアイコンを追加 /
.accordion-header[data-expanded=”true”] {
border-bottom-color: #f9f9f9; / コンテンツとの境界を消す /
}

/ アイコンの例 (擬似要素と data-expanded を使用) /
.accordion-header::after {
content: ‘+’; / 閉じているときは ‘+’ /
float: right;
transition: transform 0.3s ease;
}

.accordion-header[data-expanded=”true”]::after {
content: ‘-‘; / 開いているときは ‘-‘ /
/ あるいはアイコンフォントで rotate など /
/ transform: rotate(45deg); /
}

.accordion-content {
border: 1px solid #ccc;
border-top: none; / ヘッダーとの境界を消す /
padding: 0 10px; / 閉じた状態では padding も 0 に近くする /
background-color: #fff;
overflow: hidden; / コンテンツを隠す /
max-height: 0; / 閉じた状態 /
transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}

/ data-expanded=”true” のコンテンツ領域 /
.accordion-content[data-expanded=”true”] {
max-height: 500px; / 十分な高さ /
padding: 10px;
}
“`

“`javascript
const accordionHeaders = document.querySelectorAll(‘.accordion-header’);

accordionHeaders.forEach(header => {
header.addEventListener(‘click’, () => {
const targetContentSelector = header.dataset.accordionTarget;
const targetContent = document.querySelector(targetContentSelector);

    const isExpanded = header.dataset.expanded === 'true';

    // クリックされたヘッダーとコンテンツの状態を切り替える
    header.dataset.expanded = isExpanded ? 'false' : 'true';
    targetContent.dataset.expanded = isExpanded ? 'false' : 'true';

    // （オプション）他の開いているアコーディオンを閉じる場合はここに追加
    // accordionHeaders.forEach(otherHeader => {
    //     if (otherHeader !== header && otherHeader.dataset.expanded === 'true') {
    //         otherHeader.dataset.expanded = 'false';
    //         document.querySelector(otherHeader.dataset.accordionTarget).dataset.expanded = 'false';
    //     }
    // });
});

});
“`

こちらもタブの例と同様に、ヘッダーとコンテンツ要素にdata-expanded="true"または"false"属性を持たせ、JavaScriptでクリックされた要素の状態を切り替えています。CSSは、この属性値に基づいてmax-heightやpaddingを変化させることで、スムーズな開閉アニメーションを実現しています。

モーダルウィンドウ

モーダルウィンドウ（ダイアログボックス）の表示/非表示管理にもdata属性は有効です。

“`html

モーダルを開く

“`

“`css
/ モーダルオーバーレイの基本スタイル /
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); / 半透明の背景 /
display: flex;
justify-content: center;
align-items: center;
opacity: 0; / 初期状態は完全に透明 /
visibility: hidden; / クリックイベントも無効化 /
transition: opacity 0.3s ease, visibility 0.3s ease;
}

/ data-visible=”true” の場合に表示 /
.modal-overlay[data-visible=”true”] {
opacity: 1;
visibility: visible;
}

/ モーダルコンテンツのスタイル /
.modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
max-width: 500px;
width: 90%;
transform: translateY(-20px); / 初期位置を少しずらす /
transition: transform 0.3s ease;
}

/ data-visible=”true” の場合に元の位置に戻す /
.modal-overlay[data-visible=”true”] .modal-content {
transform: translateY(0);
}
“`

“`javascript
const showModalButton = document.getElementById(‘show-modal’);
const modalOverlay = document.getElementById(‘my-modal’);
const closeModalButton = modalOverlay.querySelector(‘.close-modal’);

// モーダルを開くボタン
showModalButton.addEventListener(‘click’, () => {
modalOverlay.dataset.visible = ‘true’;
});

// モーダルを閉じるボタン
closeModalButton.addEventListener(‘click’, () => {
modalOverlay.dataset.visible = ‘false’;
});

// オーバーレイをクリックして閉じる (コンテンツ領域以外)
modalOverlay.addEventListener(‘click’, (event) => {
if (event.target === modalOverlay) {
modalOverlay.dataset.visible = ‘false’;
}
});
“`

モーダル要素全体（オーバーレイ）にdata-visible="true"または"false"属性を付与し、その値で表示/非表示を切り替えます。CSSは、この属性値に基づいてopacityとvisibilityを制御し、必要に応じてコンテンツ部分にトランジションをかけます。JavaScriptは、モーダルの開閉トリガーや閉じるボタンのイベントを処理し、data-visible属性を更新するだけです。

7.2 バリエーションの表現

同じ種類のコンポーネントでも、色、サイズ、レイアウトなどが異なるバリエーションを持たせたい場合があります。data属性は、このようなバリエーションを表現するのにも便利です。

“`html
Primary Button
Secondary Button
Large Danger Button

“`

“`css
/ ボタンの基本スタイル /
button[data-component=”button”] {
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}

/ バリアント（variant）によるスタイル /
button[data-component=”button”][data-variant=”primary”] {
background-color: #007bff;
color: white;
}
button[data-component=”button”][data-variant=”secondary”] {
background-color: #6c757d;
color: white;
}
button[data-component=”button”][data-variant=”danger”] {
background-color: #dc3545;
color: white;
}

/ サイズ（size）によるスタイル /
button[data-component=”button”][data-size=”small”] {
padding: 5px 10px;
font-size: 0.9em;
}
button[data-component=”button”][data-size=”medium”] {
padding: 10px 20px;
font-size: 1em;
}
button[data-component=”button”][data-size=”large”] {
padding: 15px 30px;
font-size: 1.2em;
}

/ カードの基本スタイル /
.card {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
overflow: hidden;
}

.card img {
display: block;
max-width: 100%;
height: auto;
}

.card-body {
padding: 10px;
}

/ レイアウト（layout）によるスタイル /
.card[data-layout=”vertical”] {
width: 200px; / 縦型カードの幅 /
}

.card[data-layout=”horizontal”] {
display: flex; / Flexbox で横並びに /
width: 400px; / 横型カードの幅 /
}

.card[data-layout=”horizontal”] img {
width: 150px; / 横型カードの画像の幅 /
flex-shrink: 0; / 画像の縮小を防ぐ /
}
“`

この例では、ボタンやカード要素にdata-variant, data-size, data-layoutといった属性を付与し、バリエーションの種類を指定しています。CSS側では、これらの属性セレクタを組み合わせて、それぞれのバリエーションに応じたスタイルを定義しています。これにより、HTML構造はシンプルに保ちつつ、CSSだけで多様なデザインバリエーションを表現できます。

7.3 装飾的な要素やメタデータの表示

前述の擬似要素とattr()関数の組み合わせは、UI要素に付随するちょっとした情報や装飾を表示するのに役立ちます。

ツールチップやポップオーバー

html
<span data-tooltip="この要素に関する情報">情報アイコン <i class="fas fa-info-circle"></i></span>

“`css
[data-tooltip] {
position: relative;
cursor: help; / ツールチップがあることを示すカーソル /
}

[data-tooltip]::after {
content: attr(data-tooltip);
/ … (ツールチップのスタイリング – 擬似要素のセクション参照) … /
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
pointer-events: none;
}

[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
``data-tooltip`属性にツールチップとして表示したいテキストを格納しておけば、CSSだけでホバー時にツールチップを表示できます。コンテンツの内容とツールチップのテキストが一緒にHTMLに記述されているため、管理も容易です。

リストアイテムの連番表示 (CSSカウンターと組み合わせる例)

attr()関数はcontentプロパティでしか使えないため、data属性の値を直接カウンターの値として使うのは難しいですが、CSSカウンター自体はdata属性を持つ要素に適用できます。また、擬似要素でdata属性値を表示する別の例として見ることができます。

“`html

1. りんご
2. バナナ
3. さくらんぼ

“`

“`css
/ CSSカウンターの設定 /
.my-list {
counter-reset: item-counter; / カウンターをリセット /
list-style: none; / デフォルトのリストマーカーを無効化 /
padding: 0;
}

.my-list li {
counter-increment: item-counter; / リストアイテムごとにカウンターを増やす /
margin-bottom: 5px;
padding: 5px;
border: 1px solid #eee;
}

/ 擬似要素でカウンターと data 属性値を表示 /
.my-list li::before {
content: counter(item-counter) “. “; / カウンター値を表示 /
font-weight: bold;
color: #555;
margin-right: 5px;
}

.my-list li::after {
content: ” (” attr(data-item-name) “)”; / data-item-name 属性値を表示 /
color: #888;
font-size: 0.9em;
margin-left: 5px;
}
``
この例では、CSSカウンターを使ってリストアイテムの連番を表示し、さらにdata-item-name属性に格納されたアイテム名を擬似要素を使って追加表示しています。HTMLは「リストアイテムがりんごである」という情報（data-item-name=”Apple”`）を持っているだけで、表示される「1. りんご (Apple)」という文字列はCSSによって生成されています。

7.4 フィルタリング・ソート

要素のカテゴリやソート順序をdata属性に格納しておき、CSSで表示/非表示を切り替えたり、スタイルを変えたりすることができます。JavaScriptと組み合わせることで、ユーザーが選択した条件に基づいて動的に要素をフィルタリングしたり、ソート順に応じてスタイルを調整したりする機能を実現できます。

“`html

“`

“`css
/ デフォルトではすべて表示 /
.product-item {
border: 1px solid #eee;
margin: 10px;
padding: 10px;
}

/ JavaScriptで data-filtered=”true” が付与された要素以外を非表示にする /
/ このCSSだけではフィルタリング機能は実現できません。JSが必要です。 /
.product-item:not([data-filtered=”true”]) {
display: none;
}

/ ソート順を示すためのスタイル (例: 価格が高いものを強調) /
/ このCSSは、JSが data-sort-order や data-rank などの属性を設定した場合に機能します /
.product-item[data-sort-order=”desc”][data-rank=”1″] {
border-color: gold;
border-width: 2px;
}
“`

“`javascript
// JavaScriptでフィルタリングを実装する基本的な考え方
const productItems = document.querySelectorAll(‘.product-item’);

function filterItems(category) {
productItems.forEach(item => {
const itemCategory = item.dataset.category;
// カテゴリが一致するか、「すべて」の場合は表示
if (category === ‘all’ || itemCategory === category) {
item.dataset.filtered = ‘true’; // 表示したい要素に属性を追加
} else {
item.dataset.filtered = ‘false’; // 非表示にしたい要素に属性を追加
}
});
}

// 例: 初期表示またはカテゴリ選択時に呼び出す
// filterItems(‘electronics’); // electronics のアイテムだけ表示

// 注意: ソート機能は、JSで要素の順番を並べ替えるか、CSSの order プロパティを JS で制御するなど、
// より複雑な処理が必要になります。data 属性はそのための情報保持に使われます。
“`

この例では、JavaScriptを使ってユーザーの選択に基づいてdata-filtered属性の値を切り替えています。CSSは、この属性が存在しないか特定の値を持つ要素をdisplay: noneで非表示にしています。価格などのデータもdata属性に保持しておくことで、JavaScript側でソート処理を行う際のデータとして利用できます。このように、data属性はJavaScriptによる動的な処理とCSSによるスタイリングを結びつける「情報のハブ」として機能します。

8. JavaScriptとの連携（より高度な操作）

ここまで見てきたように、data属性をCSSで活用するほとんどのケースでは、裏側でJavaScriptがdata属性値を動的に操作しています。ここでは、JavaScriptとの連携について改めて整理し、なぜこの連携が重要なのかを掘り下げます。

8.1 JavaScriptによるdata属性の動的な変更

セクション2.3で解説したように、JavaScriptからelement.dataset.attributeNameという形でdata属性にアクセスし、その値を読み取ったり、変更したり、削除したりできます。

UIの状態変化（例: ボタンのクリック、フォーム入力、データロード完了など）に応じて、JavaScriptは関連するDOM要素のdata属性を更新します。

“`javascript
const myElement = document.getElementById(‘myElement’);

// 状態を “loading” に設定
myElement.dataset.state = ‘loading’;

// 完了したら “loaded” に変更
setTimeout(() => {
myElement.dataset.state = ‘loaded’;
}, 2000);
``
CSS側では、このdata-state`属性値の変化を属性セレクタで捉え、それぞれの状態に応じたスタイルを適用します。

“`css

myElement {

opacity: 1;
transition: opacity 0.5s ease;

}

myElement[data-state=”loading”] {

opacity: 0.5; /* ローディング中は少し薄く */
cursor: wait;

}

myElement[data-state=”loaded”] {

/* 特定のスタイルリセットや追加 */

}
“`
このシンプルながら強力な連携により、JavaScriptがビジネスロジックや状態管理に集中し、CSSがその状態を視覚的に表現するという役割分担が実現できます。

8.2 イベントリスナーとdata属性の状態更新

ユーザーイベント（クリック、ホバー、フォーカスなど）に応じてdata属性を更新するのが一般的なパターンです。

“`javascript
const collapsableElement = document.getElementById(‘collapsable’);
const toggleButton = document.getElementById(‘collapse-toggle’);

toggleButton.addEventListener(‘click’, () => {
const isCollapsed = collapsableElement.dataset.collapsed === ‘true’;

// data-collapsed 属性を切り替える
collapsableElement.dataset.collapsed = isCollapsed ? 'false' : 'true';

});
``
CSS側では[data-collapsed=”true”]と[data-collapsed=”false”]`に対して異なるスタイルを定義します。

8.3 CSSによるスタイリングとJavaScriptによるDOM操作の役割分担

リッチなWebサイトを構築する際、要素の見た目をJavaScriptで直接操作する（例: element.style.display = 'none', element.style.backgroundColor = 'red')ことも可能ですが、これは一般的に推奨されません。理由としては以下の点が挙げられます。

• 関心の分離の欠如: JavaScriptコードの中に見た目に関する情報が混ざり込み、コードが複雑になり、変更やデバッグが難しくなります。
• 保守性の低下: スタイルを変更する際に、CSSファイルだけでなくJavaScriptファイルも編集する必要が出てきます。
• パフォーマンス: JavaScriptによる直接的なスタイル操作は、ブラウザの再計算や再描画のコストが高くなる場合があります。CSSによる状態ベースのスタイリングの方が、多くの場合パフォーマンスに優れます。
• CSSのカスケードと詳細度: JavaScriptで直接スタイルを設定すると、インラインスタイルとして扱われるため、CSSの他のルールよりも詳細度が高くなり、意図しないスタイルの上書きや、CSSでの制御が難しくなることがあります。

推奨されるアプローチ:

1. HTML: コンテンツと、要素の状態や種類を示すdata属性を記述する。
2. CSS: data属性セレクタなどを使用して、要素の状態や種類に応じた見た目を定義する。トランジションやアニメーションもCSSで設定する。
3. JavaScript: ユーザーインタラクションやアプリケーションロジックに応じて、要素のdata属性値を変更する。DOM構造自体を大きく変更する必要がある場合（要素の追加/削除など）はDOM操作も行う。

この役割分担を守ることで、保守性が高く、変更に強く、パフォーマンスも良いコードを書くことができます。data属性は、この役割分担を効果的に実現するための重要な接着剤となります。

9. data属性を使用する上での注意点とベストプラクティス

data属性は非常に便利ですが、誤った使い方をするとかえって問題を引き起こす可能性もあります。効果的に活用するための注意点とベストプラクティスを確認しておきましょう。

9.1 セマンティックなHTMLとの両立

data属性はカスタムデータを格納するためのものですが、HTML要素の本来のセマンティクス（意味）を損なわないように使用することが重要です。

• data属性は、その要素に関するメタデータやアプリケーション固有の状態を格納するために使用します。
• コンテンツそのもの（ユーザーに見せるべき重要なテキストや情報）をdata属性に格納すべきではありません（擬似要素で表示する一時的なラベルなどは例外となり得ますが、メインコンテンツではない）。重要なコンテンツはHTML要素のテキストコンテンツとして記述してください。
• 要素の種類や役割を示すためには、適切なHTML要素や標準的な属性（例: <button>, <input type="checkbox">, disabled, checked, aria-*属性など）を優先的に使用することを検討してください。data属性は、標準属性では表現できないカスタムな状態や情報を補完するために利用するのが理想的です。

9.2 data属性に格納すべき情報

data属性に格納するのは、主に以下の情報が適しています。

• 要素の状態: data-state="active", data-expanded="true", data-visible="false", data-loading="true" など、JavaScriptやCSSでその要素の現在の状態を判断するために使用する値。
• 要素の種類/バリエーション: data-type="primary", data-variant="danger", data-size="large", data-theme="dark" など、同じ種類の要素でも見た目が異なるバリエーションを示す値。
• メタデータ: data-item-id="123", data-user-name="Alice", data-price="1000" など、JavaScriptで処理に必要だが、必ずしもユーザーに直接表示する必要のないデータ（または表示するとしても擬似要素で十分な補助的なデータ）。

9.3 idやclass属性との使い分け

id, class, data属性はそれぞれ異なる目的で使用されます。

• id: ドキュメント内で一意な要素を特定するためのグローバル識別子。主にJavaScriptからの特定要素への高速アクセスや、フラグメント識別子（URLの#部分）に使用されます。スタイリングにも使えますが、一意であるため再利用性が低いです。
• class: 要素をグループ化し、共通のスタイルやJavaScriptの動作を適用するために使用されます。再利用性が高く、CSSの主要なセレクタとして広く使われます。要素の種類やカテゴリーを示すのに適しています（例: class="button", class="card"）。
• data属性: 要素に関するカスタムなメタデータやアプリケーションの状態を格納するために使用されます。特に、同じclassを持つ要素間での「状態の違い」や「バリエーション」を示すのに適しています。

理想的には、要素の種類や基本的なスタイリングはclassで定義し、その要素の特定の状態や細かいバリエーションをdata属性で表現するのが良いでしょう。

html
<button class="btn" data-variant="primary" data-state="active">...</button>
<button class="btn" data-variant="secondary" data-state="disabled">...</button>
css
.btn { /* すべてのボタンに共通のスタイル */ }
.btn[data-variant="primary"] { /* プライマリボタン固有のスタイル */ }
.btn[data-state="disabled"] { /* 無効状態のボタンのスタイル */ }
このように使い分けることで、CSSのルールが整理され、data属性の目的も明確になります。

9.4 パフォーマンスへの影響

CSSの属性セレクタは、idセレクタやclassセレクタに比べて処理コストがわずかに高いと言われることがあります。しかし、現代のブラウザエンジンは非常に最適化されているため、ほとんどのケースでその差は無視できるレベルです。

ただし、非常に複雑な属性セレクタを多数使用したり、DOMツリーの深くに位置する要素に対して属性セレクタを使用したりする場合、パフォーマンスに影響を与える可能性はゼロではありません。一般的には、タグ名やクラス名と組み合わせてセレクタの効率を上げるなどの配慮は有効です（例: button[data-state="disabled"] は [data-state="disabled"] よりも効率が良い可能性があります）。

通常の用途であれば、パフォーマンスを過度に心配する必要はありませんが、大規模なアプリケーションで顕著な遅延が見られる場合は、CSSセレクタの最適化も検討項目の一つになり得ます。

9.5 アクセシビリティへの配慮

data属性に格納された情報は、デフォルトではスクリーンリーダーなどの支援技術によって読み上げられません。

もし、data属性に格納された情報がユーザーにとって重要であり、かつ視覚的に表示されない場合（例: 重要な状態メッセージなど）、ARIA属性（Accessible Rich Internet Applications）を使用することを検討してください。ARIA属性は、支援技術に対してWebコンテンツの役割、状態、プロパティを正確に伝えるための属性群です（例: aria-expanded="true", aria-hidden="true", aria-label="...", aria-describedby="...")。

• 状態を示すためにdata-state="open"を使用している場合でも、アクセシビリティのために対応するaria-expanded="true"などのARIA属性も同時に設定することを強く推奨します。JavaScriptでdata-stateを切り替える際に、対応するARIA属性も一緒に切り替えるように実装します。
• 擬似要素（::before, ::after）で表示されるコンテンツも、デフォルトではスクリーンリーダーに読み上げられない場合があります（ブラウザや支援技術の実装による）。重要な情報の場合は、隠し要素としてHTML内に記述し、CSSで視覚的に非表示にする（display: none; 以外、例えば visually-hidden クラスなどを使用）などの代替手段を検討してください。

data属性は開発者向けのメタデータであり、ユーザー体験に関わる重要な情報伝達にはARIA属性や適切なHTML要素の使用が必要です。

9.6 デバッグのしやすさ

data属性を使用することで、要素の現在の状態や種類がHTMLソースやブラウザの開発者ツールから一目で確認できるようになります。これはデバッグ作業を効率化する上で大きなメリットです。JavaScriptで状態が切り替わった際に、期待通りにdata属性が変更されているかを確認し、それがCSSのセレクタに正しくマッチしているかを確認することで、問題の切り分けが容易になります。

10. まとめ

この記事では、HTMLのdata属性とCSSを組み合わせることで、Webサイトの表現力を高める方法について詳細に解説しました。

data属性は、要素にカスタムのメタデータや状態を付与することを可能にし、CSSの属性セレクタはこの情報に基づいたスタイリングを可能にします。さらに、擬似要素のcontentプロパティでattr()関数を使ったり、JavaScriptと連携してdata属性値をCSS変数に反映させたりすることで、より動的で情報に基づいたリッチな表現が実現できます。

特にJavaScriptとの連携においては、JavaScriptが要素の状態を管理し、CSSがその状態を視覚的に表現するという役割分担を明確にすることで、コードの保守性、可読性、そしてパフォーマンスを向上させることができます。タブ、アコーディオン、モーダル、バリエーション表現、ツールチップなど、多くのUIコンポーネントでこのテクニックが応用可能です。

しかし、data属性は万能ではありません。セマンティックなHTMLの使用を優先し、アクセシビリティに配慮し、idやclass属性との適切な使い分けを行うことが重要です。

data属性とCSSの組み合わせは、現代のフロントエンド開発において非常に強力で一般的なテクニックです。この記事で学んだ知識を活かして、皆さんのWebサイトやアプリケーションをよりリッチで使いやすいものにしてください。

学ぶべき点はまだ多くありますが、この記事がその最初の一歩として、data属性とCSSの可能性を感じていただくきっかけとなれば幸いです。ぜひ実際にコードを書きながら、それぞれのテクニックを試してみてください。

---