はじまりはじまり。
contentプロパティの使い所あれこれ
今回は、contentプロパティにフォーカスして、その使い所を色々とご紹介します。やや小難しいプロパティかつ、対象外のブラウザもありますが、色々と面白いことができます。
contentプロパティとは
contentプロパティは、HTML文書内に存在していない内容（文字や画像等）をCSSだけで追加することができるプロパティです。また、このプロパティはbefore疑似要素または、after疑似要素とセットで使います。つまり、内容が追加される場所は要素の直前、または直後、ということになります。
シンプルな例を挙げてみます。
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#" class="new" >お知らせ</a></li>
<li><a href="#">ギャラリー</a></li>
<li><a href="#">コンタクト</a></li>
</ul>
.new:after {
content: "new!";
margin-left: 5px;
font-size: 10px;
color: #f00;
vertical-align: text-top;
}
かなり単純な例ですが、この場合、class属性がnewの要素の直後に、"new!"という内容（文字）を追加し、margin-leftで少し左側に隙間を空けて、font-sizeでテキストを小さくし、colorで赤くして、vertical-alignで上に寄せる、ということをしています。するとこうなります。
追加する内容を画像にしたければこんな風に書きます。
.new:after {
content: url("./img/icon_new.gif");
}
contentプロパティで色々やってみる
では、このcontentプロパティの使い方を色々と工夫してみた例を紹介します。
ちょっとした追加説明にしてみる
<p>
<a href="../index.html" class="top">ホーム</a>
</p>
.top:hover:after {
content: "トップページに戻ります。";
}
マウスカーソルが重なると「トップページに戻ります。」と文字がでてきます。これだけならtitle属性でいいという話もありますが、今まで見えていなかったものが、マウスカーソルを重ねるとでてくるというよくあるインタラクティブな動きを簡単に実現できますね。
リンク先のURLを表示する or 印刷する
<p>
<a href="http://m-school.biz" class="top">m-School</a>
</p>
a:after {
content: attr(href);
}
a要素のhref属性を、a要素の後に表示します。attr()というのはattributeの略、つまり属性のことですね。括弧内には属性名を指定すればいいので、title属性等なんでもOKです。印刷用のCSSに書いておいて、紙にしたらURLが記載される、ってのもいいかもしれません。
リンク先の種類によってアイコンを変える（CSS3）
a[href^="http://www.twitter"]:before {
content: url("./img/icon_twitter.png");
margin-right: 5px;
}
hrefがhttp://www.twitterで始まっていたら、リンクの前にicon_twitter.pngを表示する。
a[href^="mailto:"]:before {
content: url("./img/icon_email.png");
margin-right: 5px;
}
hrefがmail:toで始まっていたら、リンクの前にicon_twitter.pngを表示する。
a[href$=".pdf"]:before {
content: url("./img/icon_pdf.png");
margin-left: 5px;
}
hrefが.pdfで終わっていたら、リンクの前にicon_pdf.pngを表示する。
CSS3の属性セレクターと組み合わせると、こんなことができます。
CSS3の属性セレクター解説はこちらの記事をご覧ください。
参考：第11回 CSS3はここがすごい【セレクタ編1】
いかがでしたでしょうか。
やっぱり引っかかるのはブラウザーのサポート状況ですね。今回の内容はIE7以下では使えません！なぜならbeforeとafterに未対応だからです！無念！
…ですが、「IE7以下ではcontentの内容が表示されないだけ」なので、contentに意味的に重要な情報を含まなければ、「新しいブラウザーは見た目がちょっとイイ」けど「古いブラウザーでもちゃんと意味は伝わる。（見た目はちょっとちがうけど！）」って考えることができれば、もうがんがん使えるテクニックなんです。
では次回もお楽しみに。
