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

最新特集【一覧】

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

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

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

コンテンツを追加しないように指定する

　contentプロパティを「none」と指定すれば、コンテンツを追加しないように指定することができる。「none」はCSS 2.1で定義された値だ。

　たとえば、クラス名を「sample」と指定した見出しにだけ「COLUMN」という文字を追加しないようにするには、h2.sample:before { }で「content: none」と指定する。次のサンプルでは、「タイトル02」の見出しにクラス名を「sample」と指定しており、文字が追加されないことがわかる。

　なお、「content: none」の指定に対応しているのは、現在のところFirefox 3だけとなっている。

Firefox 3での表示。「タイトル02」にだけ「COLUMN」の文字が追加されない。

h2:before{
content: 'COLUMN';
color: white;
background-color: orange;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
padding: 1px 5px;
margin-right: 10px;
}

h2.sample:before{
content: none;
}

タイトル01

タイトル02

タイトル03

　また、CSS 2.1のcontentプロパティでは「none」の他に「normal」という値も定義されており、「content: none」を「content: normal」に書き換えると同じように機能することがわかる。なお、「content: normal」の指定にはFirefoxのバージョン1.5や2、Operaも対応している。SafariやInternet Explorerは対応していない。

Firefox 3での表示。

h2:before{
content: 'COLUMN';
color: white;
background-color: orange;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
padding: 1px 5px;
margin-right: 10px;
}

h2.sample:before{
content: normal;
}

※ブラウザで表示を確認する

contentプロパティの「none」と「normal」の違い

　contentプロパティの「none」と「normal」は、CSS 2.1で新しく追加された値だ。CSS 2.1では、「none」はコンテンツを追加しない処理を行うと定義されている。

　一方、「normal」は:before／:afterで追加位置を指定した場合に「none」の処理を行うと定義されている。CSS 2.1で追加位置の指定に利用できるセレクタは:beforeと:afterだけなので、現状では「none」と「normal」は同じ処理を行うことになる。

　CSS 3の草案「Generated and Replaced Content Module」では、:beforeと:after以外に追加位置を指定するセレクタが提案されており、「content: normal」と指定すると利用しているセレクタによって処理が変わるようになっている。

　なお、contentプロパティでは他にもいろいろな値を指定できるようになっており、ブラウザごとに対応状況も異なっている。そこで、次回はInternet Explorer 8（ベータ版）も含めて、各ブラウザの対応状況を確認していきたい。