2010年07月14日

contentプロパティの使い所あれこれ

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

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で上に寄せる、ということをしています。するとこうなります。

contentプロパティの使い方

追加する内容を画像にしたければこんな風に書きます。
.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に意味的に重要な情報を含まなければ、「新しいブラウザーは見た目がちょっとイイ」けど「古いブラウザーでもちゃんと意味は伝わる。(見た目はちょっとちがうけど!)」って考えることができれば、もうがんがん使えるテクニックなんです。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 13:49
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック