Category : XHTML/CSS
CSS Nite LP, Disk 3に | li要素にdl要素を入れてみる 
画像置換の問題点
2007-05-19
XHTML/CSS
CSS, image
画像置換の使いどころって，そんなにないような気がしてきました。
「heading要素（h1〜h6）にはビシッとテキストを入れておくほうが，SEO的にはいいだろう」と考えて，XHTMLにはテキスト，CSSでそれを背景画像に置換するという方法をよく使っていました。
画像置換
骨だけ書くと，次のような感じ。
<h1><a href="index.html">サイトタイトル</a></h1>h1 {
background: url(img/logo.png) no-repeat;
}
h1 a {
display: block;
width: 200px;
height: 50px;
text-indent: -9999px;
}何も出なくなる場合
しかしこの方法だと，CSSが効いていて画像を非表示にした場合，テキストも画像も出なくなってしまうんですね。こういう状況って，考えてみるとわりとあるような気がします。たとえばプリントアウトするときなどもそう。アクセシビリティ上あまりよろしくない。
素直にimg要素で
これは素直にimg要素で入れて，alt属性をちゃんと書いておくのがリスクが少ないと感じました。
<h1><a href="index.html">
<img src="img/logo.png" alt="サイトタイトル" width="200" height="50" />
</a></h1>画像置換の使いどころ
画像置換してもよいのは，「CSSが効いていて画像が非表示になったとき，何も出てこなくてもよいところ」ということになるんでしょうが，ちょっと考えてもそんなところは思い浮かびませんでした。要するにさほど重要ではないところ。飾りみたいなところ。
だとすると，そこに入るテキストも特別重要というわけでなく，SEO的な効果をねらって画像置換するという発想はちょっと違う。アクセシビリティを落としてSEO的効果だけを期待するって，SEOスパムですね。
というわけで，画像置換していた「d-spica」のロゴ画像をimg要素に書き換えました。
Search
XHTML/CSS Category Entries
- table のアクセシビリティを向上させる
- table と caption の margin
- label のススメ
- CSSの初期化ファイル
- nth-child() 疑似クラスを試してみる
- CSSファイルの分割
- IEで指定どおりのfont-sizeにならない
- すぐに使えそうなネガティブマージン
- dtをfloatする場合の注意点
- Re: CSSによるデザインワークと相性のよいHTMLって？
- flaotを解除する3つの方法
- カレンダーをリストでマークアップ
- IE6, 7 そして 8
- idの命名に迷ったら
- CSSの初期化
- h1をサイトタイトルにする理由
- classをどの要素にふるか
- li要素にdl要素を入れてみる
- 画像置換の問題点
- id="header"で問題ないのでは
- font-size指定
- clearfixでfloatを解除
- サイト全体に連なるh1〜h6
- ul，liでメニューをマークアップ
- dlで写真をマークアップ
- 見出しの階層をちゃんとする
- サイトタイトルを画像にしたら
Archives
Tag Cloud
はてなブックマーク人気エントリー
あわせて読みたい
Contact me
-
Skype : webmugi
