CSS のお勉強:所謂、画像置換の方法

所謂テキストリンクの a 要素をプロック化し、padding でテキストを追い出し、背景画像だけを表示する技法の考察。

使用している画像

link-b-link.png link-b-link.png link-b-hover.png link-b-hover.png

■ HTML 4.01 strict


height : 0 ; padding : ボックスの高さ ; で、テキストをボックス外に追い出し、背景画像のみを表示する

  1. クリックしる → a 要素の後ろにテキスト
  2. リンク → a 要素の後ろにテキスト

上記のようなテキストリンクを a : hover で a 要素の背景画像なしにして、li 要素の背景画像が見えるようにする。

1. は、li { background-position : top center ; } 、2. は、li { background-position : bottom center ; } に指定。


それでは、サンプル

  1. クリックしる → a 要素の後ろにテキスト
  2. リンク → a 要素の後ろにテキスト

ソース
<ol class="alt">
<li id="A"><a href="#" title="クリックしる">クリックしる</a> → a 要素の後ろにテキスト</li>
<li id="B"><a href="urn:nai" title="リンク">リンク</a> → a 要素の後ろにテキスト</li>
</ol>
スタイルシート
ol.alt {
	margin : 0 ;
	padding : 0 ;
	list-style-type : none ;
}

ol.alt li {
	margin : 0 20px 20px 0  ;
	padding : 0 ;
	list-style-type : none ;
	float : left ;
	width : 80px ;
	height : 80px ;
	overflow : hidden ;
	border : 1px solid red ;
	background-image : url(link-b-hover.png) ;
	background-repeat : no-repeat ;
}

ol.alt li#A {
	background-position : top center ;
}

ol.alt li#B {
	background-position : bottom center ;
}

ol.alt li a {
	display : block ;
	width : 80px ;
	height : 0 ;
	margin : 0 ;
	padding : 80px 0 0 0 ;
	background-repeat : no-repeat ;
	background-position : top center ;
	text-decoration : none ;
	overflow : hidden ;
	background-image : url(link-b-link.png) ;
}

ol.alt li a:link {
	color : blue ;
	background-image : url(link-b-link.png) ;
}

ol.alt li a:hover {
	color : red ;
	background-image : none ;
	background-color : transparent ;
}

WinIE6 の解釈

さて、Firefox 、Opera 、Safari 等では、1. のリンクも 2. のリンクも同じスタイルのように見えるのですが、WinIE6 では、2 つのスタイルに違いが発生します。

そうです。2. の方は、背景画像がずれてますね。

さて、上記例では、a 要素をブロック化したので、続くテキストは、通常のように a 要素の右ではなく、下に続く事になりますが、li 要素は高さ 80 px 固定で、しかもオーバフロー部分は不可視になりますので、テキストは見えなくなります。

ここで、1. は background-position : top center ; 、2. は background-position : bottom center ; としたので、どうやら、bottom の算定基準に違いが発生したようです。

つまり、Firefox 等は、li 要素の可視範囲をボックスの境界と捉え、背景画像もそれに従って配置されているようですが、WinIE6 では、不可視範囲もボックスとして勘定するらしく、背景画像は、(現在は不可視状態の)「続くテキスト部分」の底辺部を基準に配置されているのではないかと。

どっちが正しいのかは、仕様書を読むか、エラい人に聞いてください。

ちなみに、WinIE7 も IE6 と同じ状況です。

ところで、この文書は HTML 4.01 strict です。他のモードも確認したい人は、ISO/IEC 15445:2000 版HTML 4.01 Transitional 版もどうぞ。


この記事を書いた人