カスタムデータ属性の使い方

html に独自の属性を与えて CSS などで指定する方法を説明した記事になります。

書き方

HTML では data- で始めていれば独自のデータを付けて良いことになっています。以下、書き方の例を参考にしてみて下さい。

擬似要素で使う場合

before, after の擬似要素で使用する場合なので、content プロパティを使用し attr( ) という命令をします。( )内に独自に付けたデータ名を入れます。

＜html ソース＞

<h1 data-midashi="-MainTitle- ">見出し１です</h1>
 <p>段落で文章です。</p>
 <h2 data-midashi=" -SubTitle-">見出し２です</h2>
 <p>段落で文章です。</p>

<CSS ソース>

h1::before {
 content: attr(data-midashi);
 font-size: 12px;
 color:blue;
}

h2::after {
 content: attr(data-midashi);
 font-size: 12px;
 color:orange;
}

＜ブラウザの表示＞

セレクターとして使う場合

CSS のセレクターとして使う場合は [data-独自の属性] と書いてセレクターにして指定します。

＜html ソース＞

<h1 data-midashi="-MainTitle- ">見出し１です</h1>
 <p>段落で文章です。</p>
 <h2 data-midashi=" -SubTitle-">見出し２です</h2>
 <p>段落で文章です。</p>

＜CSS ソース＞

[data-midashi] {
 color: skyblue;
}

＜ブラウザの表示＞

属性セレクターにするとさらに色々な指定の方法ができるのでこちらの記事も参考にしてみて下さい。

CSS セレクターの種類と書き方

CSS スタイリングで使うセレクターの種類、書き方を説明した記事になります。ルールを覚えて効率の良いスタイリングをしてみてくだい。

apex-traders.net

2020.01.06