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

　スタイルシートのcontentプロパティと:beforeや:afterセレクタを利用すれば、指定した位置に文字や画像を追加することができる。CSS 2で定義されたもので、基本的な機能にはFirefox、Safari、Operaが対応している。Internet Explorerはずっと未対応のままだったが、バージョン8（ベータ版）で対応した。

　今回はCSS 2.1で追加されたcontentプロパティの「none」という値にFirefox 3が対応したので、それがどのように機能するのかを確認していきたい。

スタイルシートでコンテンツを追加する

　まずは、スタイルシートでコンテンツを追加する方法を確認しておく。コンテンツを追加するには、contentプロパティでコンテンツの内容を、:before／:afterセレクタで追加する位置を指定する。

　たとえば、コンテンツの内容を「COLUMN」、追加する位置を「h2:before」と指定すると、<h2>でマークアップした見出しの前に「COLUMN」という文字を追加することができる。なお、contentプロパティでは、追加する文字を「'」または「"」で囲んで指定する。

見出しの前に「COLUMN」という文字を追加したもの。

h2:before	{
	content: 'COLUMN'
	}

<h2>タイトル</h2>

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

　追加した文字はインラインボックスを形成するので、文字や背景・余白などのデザインを設定することが可能だ。たとえば、次のサンプルでは文字を白色に、背景をオレンジ色に指定して、paddingとmarginで文字まわりの余白サイズを調節している。また、フォントは「Comic Sans MS」で表示するように指定した。

追加した文字のデザインを指定したもの。

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

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

　また、:beforeを:afterに変更すれば、見出しの後に文字を追加することができる。

見出しの後に文字を追加したもの。

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

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

　ここまでに見てきた3つのサンプルは、Firefox、Safari、Operaで表示することができる。また、Internet Explorerはバージョン8（ベータ版）で表示することが可能だ。

Internet Explorer 8（ベータ版）での表示。

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