CSSのcontent: “”;に動的に、attrを使ってHTMLのdata-から文字を取得して入れる方法

PR

CSSの擬似要素

after、before でcontent: “”; というかたちで使うことが頻繁にあるのですが

この content: “”; のなかの文字は、CSS側で 例えば content: “文字”; としたら

不変的な文字になりますよね。

これを、タグによっては変化するようにすることが出来るのが attr を使った方法

 

 

CSS で attr を使う

まずは どのようなコードなのか見てみましょう

<!--html-->
<h1 data-subtitle="サブタイトル" >メインタイトル</h1>

<!--css-->
<style>
h1:after {
  color: red;
  content: attr(data-subtitle)""; /*この行がポイント*/
}
</style>

 

上のコードにはHTMLの部分とCSSの部分があります

 

HTMLには data-subtitle というのがあり

この data-●● の data-より後ろは任意の名前に出来ます

この data-●● にある値がCSSのcontentとして読み込める部分になります

 

 

CSSには attr(data-subtitle) というのがあり

これはHTMLタグにあるものを指しています

今回は サブタイトル というのが data-subtitle に入っているので

これが after の content として出力されます

 

つまり、data-subtitle のところだけをタグごとに変えることで動的に、contentの内容を決めていくことが出来ます。

 

 

さらに、hタグの部分を増やしてやると、それぞれに対応したdataの内容が出力されるようになります

<!--html-->
<h1 data-subtitle="サブタイトル" >メインタイトル</h1>
<h1 data-subtitle="サブタイトル2" >メインタイトル2</h1>
<h1 data-subtitle="サブタイトル3" >メインタイトル3</h1>
<h1 data-subtitle="サブタイトル4" >メインタイトル4</h1>

<!--css-->
<style>
h1:after {
  color: red;
  content: attr(data-subtitle)""; /*この行がポイント*/
}
</style>

 

タグが増えても、CSSはひとつのコードで済みます

これをcontentに直書きでやっていたら、その分のCSSを作らないといけません

でも、こうすることでCSSは最小限に出来

 

また動的にコンテンツを作り出すCMSでとても力を発揮するでしょう

 

 

attrが使えるブラウザは こちらで確認できます

http://caniuse.com/#feat=dataset

 

一応、IE8+ 他最新のブラウザで対応できるようです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー