概要

CSS で、テキストを text-indent:-1000; などで見えない位置に配置し、代わりに背景を表示する方法がありますが、これを p 要素などの行内 （inline レベル) で行う方法についてです。

• 動作確認用の demo

説明

テキストを隠して背景を表示するために、width と height が決まっている必要があるのですが、行内でこれを行うためには該当の要素を inline-block にする必要があります。なので…

a.sample{
line-height:1;
vertical-align:baseline;
display:inline-block;
width:70px;
height:18px;
background:url(img/txt01.png);
text-indent:-1000px;
overflow:hidden;
}

のような宣言をします。

こうすることで IE, Firefox 3, Safari, Opera で意図したとおりに表示できます。しかし Firefox 2 以前のバージョンでは inline-block をサポートしていないのでうまく表示できません。

Firefox 2 以下でも inline-block に似たことを行いたい場合には display プロパティの値に Mozilla 系ブラウザの独自実装の -moz-inline-box を設定します。Firefox 2 以下用の CSS ハックを使った以下のコードを追記します。

a.sample, x:-moz-any-link { /* Firefox 2 and older */
display:-moz-inline-box;
padding-top:18px;
}

a.sample, x:-moz-broken { padding-top:0;}

こうすることで、Firefox 2 以下でも意図した表示が行えます。-moz-inline-box は inline-block と似ているものの完全に同じではないため text-indent プロパティが無効になります。テキストを消すために padding-top プロパティを指定します。padding-top プロパティの値には、高さと同じ値を指定します。このサンプルでは height:18px; を指定しているので、 padding-top にも 18px を指定します。

a 要素などで :hover を指定したい場合は hover 時のソースコードを追記します。

a.sample:hover{
background-position:left bottom;
}

Firefox 2 以下専用のソースコードを追加しているので少し長くなってしまいますが、全てをまとめると以下のようなソースコードとなります。

a.sample{
line-height:1;
vertical-align:baseline;
display:inline-block;
width:70px;
height:18px;
background:url(txt01.png);
text-indent:-1000px;
overflow:hidden;
}

a.sample, x:-moz-any-link { /* Firefox 2 and older */
display:-moz-inline-box;
padding-top:18px;
}

a.sample, x:-moz-broken { padding-top:0;}

a.sample:hover{
background-position:left bottom;
}

トラックバックURI

http://www.yomotsu.net/lab/css/inline-imagereplacement/trackback

実験室に戻る