CSSで書式と値を一度に指定する

投稿者: | 2017年11月22日

HTML5の独自データ属性を利用すると、CSSで属性に指定した値(name-value の value)を取得して表示することができます。
CSSは元々書式設定に利用できるので、併せて使用すると便利です。

base on “3.2.5.9 data-* 属性を使った独自非表示データの組み込み”

独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。
独自データ属性は、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。

例えば以下のように、属性”data-sample”に指定した値に書式設定&テキスト表示することができます。

設定例

<style type='text/css'>
span[data-sample^="\*"]:after {
    font-size: 80%;
    vertical-align: top;
    content:attr(data-sample);
}
</style>

<body>
<div><span data-sample="*Ⓐ">脚注 </span></div>
<div><span data-sample="*Ⓑ">脚注 </span></div>
<div><span data-sample="*Ⓒ">脚注 </span></div>
</body>

表示例

脚注 *Ⓐ
脚注 *Ⓑ
脚注 *Ⓒ

カテゴリー: CSS