カスタムデータ属性（data-*）を“設計レベルで使いこなす”
カスタムデータ属性（data-*）は、HTML 要素に 独自の意味や状態を持たせるための仕組みです。
JavaScript との連携で使われることが多いですが、CSS でも 属性セレクタ と組み合わせることで強力なデザイン手法になります。
初心者でも迷わないように、CSS と Tailwind CSS の両方で、実務的な設計方法をかみ砕いて解説します。
カスタムデータ属性とは何か
data-* は「HTML に意味を持たせるラベル」
<div data-status="active"></div>
このように、data- で始まる属性は 自由に名前を付けられる のが特徴です。
JavaScript で状態管理
CSS で条件分岐
HTML の意味付け
これらを柔軟に行えるため、UI 設計の幅が大きく広がります。
CSS で data-* を使う基本
属性セレクタで指定する
[data-status="active"] {
background: #3182ce;
color: white;
}
[data-status="inactive"] {
background: #e2e8f0;
color: #4a5568;
}
HTML
<div data-status="active">アクティブ</div>
<div data-status="inactive">非アクティブ</div>
CSS 側で「状態ごとのデザイン」を分けられるのが最大のメリットです。
Tailwind CSS で data-* を使う
Tailwind は属性セレクタを直接サポートしていないため、
任意バリアント（arbitrary variants） を使います。
<div
data-status="active"
class="[&[data-status='active']]:bg-blue-600 [&[data-status='active']]:text-white
[&[data-status='inactive']]:bg-gray-200 [&[data-status='inactive']]:text-gray-600"
>
アクティブ
</div>
Tailwind では[&[data-status='active']]:bg-blue-600
のように書くことで、CSS と同じ動きを再現できます。
実務でよく使う data-* の設計パターン
状態管理（active / inactive / disabled）
CSS版
.button[data-state="active"] {
background: #3182ce;
color: white;
}
.button[data-state="disabled"] {
background: #cbd5e0;
color: #718096;
pointer-events: none;
}
HTML
<button class="button" data-state="active">送信</button>
<button class="button" data-state="disabled">送信不可</button>
Tailwind版
<button
data-state="active"
class="px-4 py-2 rounded
[&[data-state='active']]:bg-blue-600 [&[data-state='active']]:text-white
[&[data-state='disabled']]:bg-gray-300 [&[data-state='disabled']]:text-gray-500
[&[data-state='disabled']]:pointer-events-none"
>
送信
</button>
種類ごとにデザインを変える（type 属性の代わりに data-type）
CSS版
.card[data-type="news"] {
border-left: 4px solid #3182ce;
}
.card[data-type="alert"] {
border-left: 4px solid #e53e3e;
}
HTML
<div class="card" data-type="news">ニュース記事</div>
<div class="card" data-type="alert">重要なお知らせ</div>
Tailwind版
<div
class="card pl-3
[&[data-type='news']]:border-l-4 [&[data-type='news']]:border-blue-600
[&[data-type='alert']]:border-l-4 [&[data-type='alert']]:border-red-600"
data-type="news"
>
ニュース記事
</div>
data-* と疑似要素を組み合わせる（高度）
CSS版
.badge::after {
content: attr(data-label);
background: #e53e3e;
color: white;
padding: 2px 6px;
border-radius: 9999px;
margin-left: 8px;
}
HTML
<span class="badge" data-label="NEW">商品名</span>
attr() を使うことで、
data 属性の値をそのまま表示できます。
Tailwind版
Tailwind では attr() をそのまま使えます。
<span
class="relative after:absolute after:ml-2 after:px-2 after:py-0.5
after:bg-red-600 after:text-white after:text-xs after:rounded-full
after:content-[attr(data-label)]"
data-label="NEW"
>
商品名
</span>
data-* を使うときの重要ポイント（深掘り）
data-* は「意味を持たせる」ための属性
クラス名は見た目
data-* は意味や状態
この役割分担を意識すると、CSS 設計が一気に整理されます。
例class="is-active" → 見た目の状態data-state="active" → UI の意味としての状態
data-* は JavaScript と相性が抜群
element.dataset.state = "active";
JS で状態を切り替え
CSS で見た目を切り替え
この組み合わせは UI 設計の定番です。
Tailwind では data-* を「条件分岐のトリガー」として使う
Tailwind はクラスベースの設計なので、
data-* を使うと「HTML の意味」と「見た目の切り替え」を分離できます。
これは大規模 UI で特に効果を発揮します。
例題：タブ UI を data-* で管理する
CSS版
.tab[data-active="true"] {
background: #3182ce;
color: white;
}
.tab[data-active="false"] {
background: #e2e8f0;
color: #4a5568;
}
HTML
<div class="tab" data-active="true">タブ1</div>
<div class="tab" data-active="false">タブ2</div>
Tailwind版
<div
class="tab px-4 py-2 rounded
[&[data-active='true']]:bg-blue-600 [&[data-active='true']]:text-white
[&[data-active='false']]:bg-gray-200 [&[data-active='false']]:text-gray-600"
data-active="true"
>
タブ1
</div>
まとめ
カスタムデータ属性（data-*）は、
HTML に「意味」や「状態」を持たせるための強力な仕組みです。
CSS では
属性セレクタで状態ごとにデザイン
attr() でラベル表示
複雑な UI の条件分岐に最適
Tailwind では
任意バリアントで data-* を条件にデザイン
状態管理と見た目を分離できる
大規模 UI でも破綻しにくい
