contentプロパティでコンテンツを追加する（2）：FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-18 07:00:00
今回は、contentプロパティで画像やキャプションを追加する方法を紹介する。contentプロパティはCSS 2から標準規格に取り入れられたもので、:before／:afterセレクタといっしょに利用することで文字や画像を追加することができる。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

alt属性の値を画像のキャプションとして表示する

　 contentプロパティを「attr(属性名)」と指定すると、属性の値を取得して出力することができる。たとえば、次のサンプルではのalt属性の値を取得して、画像の後ろにキャプションとして表示した。なお、現在のところOperaだけが「attr()」の指定に対応している。

Operaでの表示 Operaでの表示 
img:after{
content: attr(alt);
}

青空の写真
※ブラウザで表示を確認する

　通常、画像のキャプションを表示するには次のようにの後にテキストを記述する。しかし、キャプションの内容はalt属性の値と同じ場合が多く、テキストブラウザや音声ブラウザでは同じ内容を繰り返して読み聞きすることになってしまう。

青空の写真青空の写真

　この問題を回避するため、画像にキャプションを表示する場合はalt属性の値を半角スペースなどに置き換えるのが一般的だ。しかし、これでは文法違反になるのを回避できるというだけで、alt属性を記述している意味がない。

 青空の写真

　一方、contentプロパティでalt属性の値をキャプションとして表示すれば、文法違反にもならず、無駄な記述を増やす心配もない。次のように指定することで、contentプロパティで表示したキャプションのデザインを設定することもできる。ここでは、キャプションを画像の中央に揃えて表示するように設定した。

Operaでの表示 Operaでの表示 
img:after{
content: attr(alt);
display: block;
width: 350px;
text-align: center;
margin-top: 5px;
}

青空の写真
※ブラウザで表示を確認する

　次回は、contentプロパティで見出しに連番を付ける方法を紹介する。

  • 新着記事
  • 特集
  • ブログ