『テキスト飛ばし』やら『画像置換』やら。
当たり前のように使われている画像置換技ですが、最近になって状況が変わってきた気がします。
Googleでは既に画像置換を弾いてるという噂もチラホラ。

ここ最近の画像置換方法と改善策？について

“-9999px”が駄目なら！みたいなノリで、下記のようなコードにしているサイトも見かけます。

h2 {
     text-indent:-12345px;
}

私的な予想ですが、<h>タグのテキストインデントがマイナスだった場合に、その要素の優先順位を下げている気がします・・・・・・。

あと、テキストインデントで画像置換を使ってしまうと、”text-align”とかでメンドクサイ事になったりしますよね。

そんなこんなで今日聞いた話では、テキストインデントに代わる新たな手法として、”z-index”を使い、テキストの上に画像を乗っけてしまうなんていう無理矢理な手法も出てきたそうです。

まあここまでして画像置換にこだわる必要もないので、私は<h>の中に直接<img>を放り込んでいます。
ALTさえしっかりと記載していれば、SEO的にも問題ないんじゃねーか的な。

さあここで問題なのが、ボタン要素などのリンクタグに対する画像置換方法。
ほとんどの方は、マウスオーバーイベントをCSSで制御していると思います。
例えば下記のような具合で。

ul#nav li.nav001 a,
ul#nav li.nav002 a {
     display:block;
     text-indent:-9999px;
}

ul#nav li.nav001 a {
     width:100px;
     height:50px;
     background:transparent url(/images/nav001.gif) 0 0 no-repeat;
}

ul#nav li.nav002 a {
     width:100px;
     height:50px;
     background:transparent url(/images/nav002.gif) 0 0 no-repeat;
}

ul#nav li.nav001 a:hover,
ul#nav li.nav002 a:hover {
     background-position:0 -50px;
}

出来る限りテキスト飛ばしを避ける事を考えると、上記もNGですよね。

そこで、ここ最近どのブラウザでも最適化が行われている『JavaScript』で代用します。このサイトでも実際に使っている簡単な方法があります。これは後日詳しく・・・・・。

今では有名サイトでも画像置換はやめて、<h>タグに<img>を放り込んでるサイトが増えてきているので、テキスト飛ばしについて、ちょっと気を遣い始めた方がいいかもしれません。

結局、CSSが普及する前の書式に戻ってきた。
どの分野でも『時代は繰り返す』ですね。