text-indent: -9999px; を使って画像置換を行う方法

2010年11月01日

text-indent: -9999px;を使って表示されているテキストを非表示にし、タグの内側を背景画像で置換するという方法について、ご紹介します。

※text-indet:-9999px=スパムというイメージを持たれる方がいらっしゃいますが、背景画像に書かれている文言と同じテキストをtext-indentで非表示にすることは問題ありません。ユーザに見えている画像の文字と全く関係のないテキストをtext-indentで非表示にすることはスパムに当たる可能性が強いので行わないようにしましょう。

HTML

1<p>
2<a href="#" class="sampleButton">
3このテキストは非表示になります
4</a>
5</p>

CSS

1.sampleButton {
2    width: 100px;
3    height: 100px;
4    display: block;
5    background: url("button.gif") no-repeat;
6    text-indent: -9999px;
7    overflow: hidden;
8}

上記のように、text-indent: -9999px;を使うことで、aタグ内のテキストを画面外に飛ばし、指定された背景画像を代わりに表示させることができます。
また、要素にoverflow: hidden;を入れることで、リンクとしてクリックした際に表示される点線が画面端まで伸びる状態を防ぐことができるとともに、IE6で稀に発生する「タグの外に置換したはずのテキストが数文字表示される」というバグに対しても対処することが可能です。

また、この画像置換を行う際に気を付けたいこととして、

HTML

1<p>
2サンプルテキストサンプルテキスト
3<a href="#" class="sampleButton">
4このテキストは非表示になります
5</a>
6</p>

CSS

1p {
2    text-lign: right;
3}

このように、画像置換を行うタグの親要素にtext-align: right;の要素が指定されていると、画像置換を行うタグにまで右寄せの要素が継承され、飛ばしたはずのテキストが表示されてしまいます。

この対処法として、

CSS

1.sampleButton {
2    width: 100px;
3    height: 100px;
4    display: block;
5    background: url("button.gif") no-repeat;
6    text-indent: -9999px;
7    overflow: hidden;
8    text-align: left;
9}

サンプルページ

このように、画像置換を行う要素に対してtext-align: left;を指定することで、テキストが表示されてしまう状態に対処することが可能です。

画像置換を行う際は、これらの点に気を付けてコーディングを行ってみてください。