CSSのテキストと画像置き換え

css

SEOだの何だので、
CSSの実際の使用され方が無茶苦茶になている気がしますが（汗）
タイトルだけみると、何の記事なのかわかりませんね（笑）
YST（Yahoo検索エンジン）では画像のalt属性を無視するそうです。
私は妥当な策だと思っています。
これではすべて画像で作成したHPが上位に出てしまうわけですから
alt属性は無視すべきだと思います。


そこで登場したのが、このタイトル
「CSSのテキストと画像置き換え」です。
要は、ソースコードにはテキストを書いておりますが、
実際には画像が表示されるってことです。


一回実装してみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>
.textOut {
	background:url("http://img.f.hatena.ne.jp/images/fotolife/u/uen1130/20080226/20080226124218.jpg") no-repeat;
	text-indent:-9999px;
	display:block;
	width:300px;
	height:300px;
	overflow:hidden;
}
</style>
</head>
<body>
<h1 class="textOut">テキストを電王に置き換える</h1>
</body>
</html>


これで表示されるのが以下画像です。


ソースコード内には全く画像表記をしておりませんが、
画像が表示されますね。
これは「text-indent:-9999px;」でテキストは見えない位置に移動し、
その代わりに「background:url("http://・・・・」で画像を表示する。


その昔、h1タグの乱用で、スパムサイトが増えたように
この技法もいつかスパムになる可能性がなくはない。
元来、CSSは「デザイン指定はソースコード上に記述しない」ために
生まれたものだと私は考えております。
責務を別けろってこと！！
その機能を使用して、このいかさまは、
個人的に好きではない。
アメリカのサイトは文字が多くて好きだ。
いずれ日本もそうなるさ。
そうなってほしいと願っています。