text-indent:-9999pxはNG

前回の記事「CSSで画像のロールオーバー」の中ですこしふれた

text-indent:-9999pxは好ましくない。という、内容を掘り下げようと思う。

text-indent:-9999pxの特徴は、テキストを画面外に吹き飛ばして、表示エリアには表示させてない様にする。

という事だ。SEO対策で引っ掛けたいテキストをtext-indent:-9999pxで処理すればブラウザには表示されないが

テキストはそのページに存在するという事だ。この特徴を利用して画像メニューや画像での見出しなどに使用することで

SEOに必要なテキストはソース上に残り、ボタンや見出しなどのデザイン性を保持する事が出来る。

しかし、このtext-indent:-9999pxは悪意をもって使用すればスパムになることは言うまでもない。

googleはtext-indent:-9999pxされたテキストと画像の内容があっていれば黒ではない。と、言ったとか

言わないとか・・・。悪意を持って使用しなければ白、悪意をもって使用すれば黒。何を基準として悪意とするかは
曖昧だった。この事から、世の中の的にグレー。という認識があったのでないだろうか。

そんな出来事にも終止符がおとずれた。

■海外SEO情報ブログ

text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011

白黒つくのは大変ありがたい。

黒と判断された以上、この方法で作業を進めることは出来ない。

それに代る方法として、画像を使用、テキストを使用、という事になる。

画像を使用するのであればデザイン性は保てるがテキストが減ってしまう、

テキストを使用するのであればデザイン性が出せない。という葛藤がまっている。

これを解消するのがCSS3だ。

CSS3を使用すればすべてが解決するわけではないが、二つの要素を併せ持つ新たな

アイデアへ結びつくと思う。

これからのWEBデザインには、CSS3ありで考えてもいいではないかと、個人的には考えている。

■参考サイト

・CSS3を適応させたい

日本語紹介サイト：たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

※備考：htcへのリンクはcssからの相対ではなく、htmlなどのファイルからのパスとなる。

また、IEでうまく表示されない場合はposition:relativeを追加してみる。

・独自のフォント適応させる

デコもじ

Typekit

・その他

Windowsフォントをアンチエイリアスでキレイに見せる方法

■2011.07.05追加

Googleが提供しているWEBfonts

http://www.fontcomparer.com/