Blog | ブログ

2008.05.30 00:14

CSS Sprite is good?

CSS(必要に応じてXHTML)に手を加えて、
ページの高速化+更新を楽にする。

■CSS Sprite

画像置換の拡張版のような感じで、
背景画像を1枚の画像に統合してしまうやりかた。
そういう使い方ができるのはわかってはいたけれども、
ページ高速化も期待できるとは目から鱗。

独学で極める "Webデザイン"の技と心:第10回 CSS Spritesでサイトを高速化|gihyo.jp
http://gihyo.jp/design/serial/01/ss-design/0010

CSS Spriteを活用しよう - DesignWalker
http://www.designwalker.com/2008/02/css-sprite.html

文字背景などで使う分には全く便利すぎるというか、
そうしていこうと思いましたが、
display: none;で文字を消すのはどうなんだろうと少し考えてしまった。

■画像置換について

もともと画像置換は、
text-indent:-9999em;や、アンカーの下のspanにdisplay:none;などで
文字を消した背景に本来imgタグとして置きたい画像を敷く。
ロールオーバーもcssのみで実現可能。
というところで、前は頻繁に見かけました。

その後、
display:none;やtext-indent:-9999em;は、
SEOスパムとなのでは?
疑問を感じ、僕もずっと使ってませんでした。

■これらを踏まえて

実際どうなんだろうと考えていたら、
指針になりそうな記事がまとまっていました。

画像置換とSEOスパムの境界線 - Emotional Web
http://www.lllcolor.com/web/seo/80.html

画像置換でも、
目的がユーザビリティ向上なら問題ない?
CSS Sprite の処理速度向上もそのうちに入るのでは。
googleやその傘下のyoutubeがCSS Spriteを使用しているので、
大丈夫なんでしょうか。

ただまぁ、
googlebotが画像の文字まで読むのも遠い話ではないようなので、
CSS Spriteは手段の1つとして定着していくかも知れません。

2008.05.30 00:14