content:attr()と独自データ属性を使い方〜CSS

HTML&CSS

:beforeや:afterとセットで使用するcontentプロパティがありますが、その値にattr()という便利なものがあります。

スポンサーリンク

attr()について

あまり使用しないcontentプロパティの値だけに見逃していましたが、使いようによってはスクリプト的に使えて便利かもしれません。
attr()の働きは引数で指定した属性の値を取ることができるものです。jQueryなど使ったことのある方なら、attr()の活用範囲の大きさはご存知のとおりです。

attr()を使用したサンプル

contentプロパティは指定した値をHTML上に表示することができますが、imgタグを値に入れても画像表示とはならないで、タグがそのままテキストで表示されます。そのため何らかのテキストを値にしてそのbackground-imageで画像を指定すると画像を表示することができます。
contentプロパティで挿入した文字の整形は同じセレクタの中で指定することができます。

HTMLコード

<p class="mypic" data-img="Concert"><img src="oce.jpg" alt="オーケストラ" width="380" height="380"></p>

CSSコード

.mypic:before{
	content:attr(data-img);
	display:block;
	width:100px;
	padding-top:80px;
	background-image:url(top1.jpg);
	margin:auto;
}
.mypic{
	text-align:center;
	border:1px #ccc solid;
	width:380px;
	vertical-align:bottom;
	padding:10px;
	box-shadow:10px 10px 10px #ccc;
}

独自データ属性

data-imgはHTML5から使用することができる独自データ属性です。

独自データ属性は、名前空間に属さない属性で 「data-」で始まり、ハイフンの後に任意の一文字以上の名前をつけます。
独自データ属性は、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納するためのものです。jQueryなどでも頻繁に使用される便利な属性です。

contentプロパティは便利でもありますが、HTML文として認識されませんのであまり多用すべきものではありません。あくまでデザインの一環としてHTML文上に置いておきたくないものに限った使い方をするべきです。

タイトルとURLをコピーしました