text-indentを使わない画像置換テクニック
2008/04/17 12:37
CSSでコーディングしていく上で画像置換の方法は悩むところだと思います。
text-indent:-9999em;を使いテキストを飛ばしてしまうか。
そのまま画像を置いてしまうか。
私は主に、text-indent:-9999em;を使っていましたが、最近ではちょっと違った方法を使っています。
まずはCSSのソースをご覧下さい。
CSSソース
a.menu {
width:30px;
height:0;
overflow:hidden;
display:block;
padding-top:10px;
background:url(img/btn_menu.gif) no-repeat 0 0;
}
ポイントは｢height:0;｣と｢padding-top:10px;｣でしょうか。
このa要素の高さはpadding-top:10px;で作っています。そうすると、文字はこの下に表示されちゃいますね。
そこでoverflow:hidden;を使うことによってはみ出ている文字を非表示にしちゃっています。
上記のような感じですかね。
メニューボタンの下にテキストがあって、それがoverflow:hidden;で非表示にされている。
こんな状態です。
text-indentだとクリックしたときに線が出ちゃうのがいやなんですが、これだとその心配もありませんし、Dreamweaver CS3でのデザインビューでの表示もおかしくならないと思います。
画像置換のテクニックは色々な方法がありますが、SEOやアクセシビリティ的にどうなの？って話になりますが、ここでは画像置換のみの話なのでそれは置いといて・・・。
私のブログでこのコーディングを使っているので、ソースとか見ちゃって盗んでくれてもいいのでどんどんアクセスしちゃってください（笑）
画像置換でこんないい方法もあるよ！って方は教えてくださいー。
Category : CSS , Web Design
Tags : CSS, overflow:hidden;, text-indent, 画像置換
Comment & Track Back
コメントをどうぞ♥
Track Back URL
[...] 【検索エンジンスパム】CSSのdisplay:noneの利用 text-indentを使わない画像置換テクニック [...]