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

見出しの前に画像を追加する

　前回の「contentプロパティでコンテンツを追加する（1）--FirefoxとSafariのCSS」ではcontentプロパティで文字列を追加したが、画像を追加することも可能だ。画像を追加するには、次のように「url(〜)」という形で画像のURLを指定する。ここでは<h1>でマークアップした見出しの前にmark.pngを追加するように指定した。

見出しの前に画像を追加したもの

h1:before	{
	content: url(mark.png);
	}

<h1>こんにちは</h1>

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

　contentプロパティによる画像の追加には、Firefox、Safari、Operaが対応している。Internet Explorer 8（ベータ版）は文字列の追加には対応したが、画像の追加には対応していない。

　また、CSSの標準規格では「content: url(〜)」と記述することで画像以外の外部ファイルを読み込むことも想定されている。しかし、現状ではどのブラウザも画像の読み込みだけをサポートしている。

contentプロパティで画像を追加するメリット

　画像はHTML/XHTMLの<img />タグで追加することができるが、スタイルシートを利用した方が画像の追加や差し替えに手間がかからないというメリットがある。

　たとえば、次のサンプルのように、クラス名を「new」と指定した見出しにだけ画像を追加することも可能だ。ここでは、見出しの後ろに新着を示す画像を追加している。

出しの後に画像を追加したもの

h1.new:after	{
	content: url(new.png);
	}

<h1 class="new">見出しＡ</h1>

<h1 class="new">見出しＢ</h1>

<h1>見出しＣ</h1>

<h1>見出しＤ</h1>

<h1>見出しＥ</h1>

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

　また、スタイルシートで見出しに画像を追加する場合、現状では画像を背景画像として追加するテクニックが広く利用されている。たとえば、次のサンプルの場合、「見出しＡ」にはcontentプロパティで、「見出しＢ」にはbackground-imageプロパティで画像を追加している。ブラウザ画面の表示だけであれば、大きな違いは発生しない。

contentとbackground-imageで画像を追加したもの

h1.head01:before	{
	content: url(mark.png);
	}

h1.head02	{
	background-image: url(mark.png);
	background-repeat: no-repeat;
	padding-left: 28px;
	}

<h1 class="head01">見出しＡ</h1>

<h1 class="head02">見出しＢ</h1>

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

　しかし、ブラウザが背景を印刷しない設定になっていると、contentプロパティで追加した画像は印刷されるが、background-imageプロパティで追加した画像は印刷されない。

　たとえば、Firefoxの［ファイル］→［ページ設定］で「背景色と背景画像も印刷」のチェックを外すと、上のソースの印刷結果は次の画像のようになる。多様なユーザー環境で意図したデザインを維持するためには、contentプロパティを利用する方がメリットがあると言える。

背景を印刷しない設定にしたときの印刷結果

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