HTML

HyperText Markup Language data-* attribute.

data-*属性

　data属性は HTMLのタグに設定できる属性の一つです。属性とは要素に設定を付与することができるものです。属性は dataの他にも idや style、classなどがあります。

　data属性はカスタムデータ属性とも呼ばれていて、独自の属性を設定することができます。

基本書式

HTML source


<div data-○○=”data”>テキスト</div>

CSS source


セレクタ[data-○○=”data”] {
	プロパティ: 値;
}

　data-○○ の○○の部分を自由に設定することができます。

Sample 1

HTML source


<div data-box="box-orange" class="box"></div>
<div data-color="box-red" class="box"></div>

CSS source


.box {
	width: 200px;
	height: 150px;
}

.box[data-box="box-orange"] {
	background-color: orange;
}

.box[data-color="box-red"] {
	background-color: red;
}

　data属性にスタイルを設定する場合は、要素 [data-○○××=”○○××”] の形式で指定します。data-の後ろの部分は、HTMLで設定したものと同じ名称を指定してください。

Sample 2

　data-boxに値を設定しなくても、[data-box]の形式でスタイルの設定ができます。

box1
box2

HTML source


<div data-box="box-orange" class="box">box1</div>
<div data-box class="box">box2</div>

CSS source


.box {
	width: 200px;
	height: 150px;
}

.box[data-box] {
	background-color: orange;
}

Sample 3

　data属性を使うと、例えば次のように data属性で設定したものを疑似要素でブラウザに表示することができます。

メインタイトル

HTML source


<h2 data-sub="サブタイトル">メインタイトル</h2>

CSS source


h2 {
	position: relative;
	display: inline-block;
}

h2:before {
	position: absolute;
	content: attr(data-sub);
	top: -8px;
	left: 50%;
	font-size: 10px;
	transform: translateX(-50%);
}

Sample 4

　data属性は JavaScriptと組み合わせて使うことが多いです。

　次のコードは、JavaScriptで data属性にセットした値を変更する処理をする場合です。

メインタイトル

HTML + JavaScript source


<h2 id="test" data-sub="サブタイトル">メインタイトル</h2>
<script>
	const el = document.getElementById('test');
	el.dataset.sub='サブタイトル変更';
</script>

CSS source


h2 {
	position: relative;
	display: inline-block;
}

h2:before {
	position: absolute;
	content: attr(data-sub);
	top: -8px;
	left: 50%;
	font-size: 10px;
	transform: translateX(-50%);
}

　要素に設定した idを、変数el で取得しています。datasetで data属性を更新することができます。datasetのあとの subは、data属性で設定した data-subの部分（data-の後ろの部分）を指定します。

　このようにすると、JavaScriptで data属性を取得して中身を変更することができます。