CSS Sprite 失敗

ページの読み込みが速くなる、管理も簡単になるってわけで、遅ればせながら、このあいだある案件ではじめて CSS Sprite に挑戦しました。

CSS で指定する複数の画像を、でかい一枚絵の中に適当に配置してまとめておくっていう、あれですね。

でも、すっかり舞い上がっちゃって、いろいろしくじりました。

最初に、まず、全画像入りの一枚絵を作るような意気込みでのぞんじゃって、いやいやいや、gif と jpg は一緒にできないよって、軽くがっかりしてる自分にあきれました。アホですね。でも、それだけじゃありません。

１、可変サイズのとこは無理！

これもはじめから気づくことができないのはどうかしてると思いますが、CSS Sprite が使えるのって、大きさが決まってるHTML エレメントに対する　no-repeat な背景画像としてのみなんですよね。

あたりまえだけど、タイル状に敷き詰めるようには使えないし、サイズが子要素に依存するエレメントの上端や左端だとかに no-repeat で置くなんてこともできない。エレメントが大きくなると一枚絵の隣の画像が見切れてきちゃたりして。

それに気づいて、一枚絵からいらない画像を次々はぎ取っていったんですけど、けっこうその手のが多くって。しかも、せっかく採取した座標は惜しいから、イキのやつはそのまんま、そしたら、だだっぴろい空間にぽつーんぽつーんと無造作に画像が散らばった、スカスカの一枚絵になっちゃいました。見られたらはずかしいです。

２、コンテンツまで Sprite すんな！

あと、調子にのって、コンテンツとしての画像まで入れちゃって。CSS なんてコンテンツと装飾を分離するためにあるんであって、スタイル切って消えちゃうのが装飾、まだ見えてるのがコンテンツってわけなのに、スタイル切ったら文字しか残らなかったよ！　CSSバカの仕事。

３、せっかくの CSS がだいなしだ！

ね。コンテンツとスタイルの関係はなるべく疎であるべきなんで。だから、エレメントの id や class の名前は、文書構造上の論理名だったり、セマンティックなものにしとけって、これはもう鉄則。それなのに、同じ一枚絵の画像を背景に使うエレメント全部に文書構造もなにもなく、みんな同じ class　名を与えちゃって、その class のスタイルの定義として、一枚絵の画像パスを指定してる始末、こりゃ同じこと何回も書く手間が省けていいや、なんて。おいおい、それじゃ特定のスタイルに密結合しすぎだよ。CSS をはじめた頃に抱いたあの志、もう忘れちゃったの？

なんてな具合でして、誠にお恥ずかしい限りです。自戒をこめて、ここに告白しておきます。

-----------------
sent from W-ZERO3