低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

CSSによる画像置換

SEO対策の一貫としてよく使われる「画像置換」
メニューやロゴなど、見栄えを意識して画像にしたくとも、SEO的にはプレーンテキストで表示したい場合などに、使われる手法で、(X)HTMLファイルにはプレーンテキストのみで記述し、CSSファイルによって画像に置換するものです。
一般的な方法として、以下の二つの方法が挙げられます。

display: none; を使用する方法

CSSファイル

a#logo {
	display: block;
	width: 120px;
	height: 50px;
	background: url(../images/logo.jpg) 0 0 no-repeat;
}
a#logo span {
	display: none;
}

(X)HTMLファイル

<a href="/" id="logo"><span>ScuderiaWeb</span></a>

a要素をブロック要素にした上で、背景に画像を設定し、本来表示されるはずの文字をdisplay: none;によって非表示にするものです。
無駄なspanタグの記述が必要なため、あまり推奨されません。

text-indent: -9999px; を使用する方法

CSSファイル

a#logo {
	display: block;
	width: 120px;
	height: 50px;
	background: url(../images/logo.jpg) 0 0 no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

(X)HTMLファイル

<a href="/" id="logo">ScuderiaWeb</a>

a要素をブロック要素にした上で、背景に画像を設定し、文字の表示位置をtext-indent: -9999px;で本来表示されるはずの位置から水平方向に-9999pxずらします。水平方向に-9999px、つまり、左に9999pxというのは、ブラウザの枠外になりますので、結果的にどこにも表示されない、ということになります。

こちらを使用する場合、ポイントはoverflow: hidden;です。

この記述がなくても画像置換という目的はクリアできますが、記述しなかった場合、FireFoxなどにおいて、リンクをクリックした際に、テキストが表示される-9999pxずらした位置から、画像の位置まで全てを破線が囲ってしまいます。

overflow: hidden;を指定することで、画像の範囲のみに破線が表示され、FireFoxでも違和感なく表示させることが可能です。

そもそも画像置換はするべきか

画像置換については様々なところで議論が交わされています。
例えば、ブラウザを"CSS有効・画像非表示"という設定にしていた場合、CSSが有効なため、display: none;やtext-indent: -9999px;が適用され文字列が表示されませんが、画像を非表示としているため、置換されたはずの画像が表示されず、文字も画像もない状態になってしまいます。
検索エンジンのクローラーはimgタグのalt属性を認識しますので、素直にimgタグで画像を配置し、alt属性に適切な文言を記述する方が良いという意見もあります。
現時点では確実にどちらが良いという確証はありませんので、制作者の判断で実施してください。