DN*BLOG

2008.4.17

text-indentを使わない画像置換テクニック

CSSでコーディングしていく上で画像置換の方法は悩むところだと思います。

text-indent:-9999em;を使いテキストを飛ばしてしまうか。
そのまま画像を置いてしまうか。

私は主に、text-indent:-9999em;を使っていましたが、最近ではちょっと違った方法を使っています。
まずはCSSのソースをご覧下さい。

CSSソース

a.menu {
	width:30px;
	height:0;
	background:url(img/btn_menu.jpg) no-repeat 0 0;
	overflow:hidden;
	display:block;
	padding-top:10px;
}

ポイントは「height:0;」と「padding-top:10px;」でしょうか。
このa要素の高さはpadding-top:10px;で作っています。そうすると、文字はこの下に表示されちゃいますね。
そこでoverflow:hidden;を使うことによってはみ出ている文字を非表示にしちゃっています。

画像置換サンプル

上記のような感じですかね。
メニューボタンの下にテキストがあって、それがoverflow:hidden;で非表示にされている。
こんな状態です。

text-indentだとクリックしたときに線が出ちゃうのがいやなんですが、これだとその心配もありませんし、Dreamweaver CS3でのデザインビューでの表示もおかしくならないと思います。

画像置換のテクニックは色々な方法がありますが、SEOやアクセシビリティ的にどうなの?って話になりますが、ここでは画像置換のみの話なのでそれは置いといて・・・。

私のブログでこのコーディングを使っているので、ソースとか見ちゃって盗んでくれてもいいのでどんどんアクセスしちゃってください(笑)

画像置換でこんないい方法もあるよ!って方は教えてくださいー。

FavoriteLoadingAdd to favorites

Category : CSS , Web Design

関連する記事