HTML5の「独自データ属性」を使うと、適切な属性や要素がない場合に、webページなどに固有の独自データを格納することができます。この属性の名称は、「data-」から始まり1文字以上を続ける必要があります。

サンプル（１）は、独自データ属性の「data-area」を使って、同じテキスト「ダミーのサンプルテキスト」の表示範囲を変更しています。

サンプル（１）

サンプルのhtmlソース

<div class="sample1">
	<p data-area="d-a-12">ダミーのサンプルテキスト</p>
	<p data-area="d-a-10">ダミーのサンプルテキスト</p>
	<p data-area="d-a-8">ダミーのサンプルテキスト</p>
</div>

サンプル（１）のCSSソース

.sample1 p {
	white-space: nowrap;
	overflow:hidden;
	}
.sample1 p[data-area="d-a-12"] {
	width: 12em;
	}
.sample1 p[data-area="d-a-10"] {
	width: 10em;
	}
.sample1 p[data-area="d-a-8"] {
	width: 8em;
	}

 

サンプル（２）は、独自データ属性の「data-color」を使って、同じテキスト「ダミーのサンプルテキスト」の色を変更しています。

サンプル（２）

サンプル（２）のhtmlソース

<div class="sample2">
	<p data-color="red">ダミーのサンプルテキスト</p>
	<p data-color="blue">ダミーのサンプルテキスト</p>
	<p data-color="green">ダミーのサンプルテキスト</p>
</div>

サンプル（２）のCSSソース

.sample2 p[data-color="red"] {
	color: red;
	}
.sample2 p[data-color="blue"] {
	color: blue;
	}
.sample2 p[data-color="green"] {
	color: green;
	}

 

サンプル（３）は、独自データ属性の「data-icon」と::before疑似要素を使って、テキストの前にアイコン画像（svg）を表示します。

サンプル（３）

サンプル（３）のhtmlソース

<div class="sample3">
	<p data-icon="cube">ダミーのサンプルテキスト</p>
	<p data-icon="mail">ダミーのサンプルテキスト</p>
	<p data-icon="face">ダミーのサンプルテキスト</p>
</div>

サンプル（３）のCSSソース

.sample3 p[data-icon="cube"]::before {
	 content: url(svg/cube.svg);
	 position:relative;
	 top:4px;
	 margin-right:3px;
	}
.sample3 p[data-icon="mail"]::before {
	 content: url(svg/mail.svg);
	 position:relative;
	 top:4px;
	 margin-right:3px;
	}
.sample3 p[data-icon="face"]::before {
	 content: url(svg/face.svg);
	 position:relative;
	 top:4px;
	 margin-right:3px;
	}