CSS spriteに挑戦

ページのロードが遅いので画像リクエストを減らすことに。
CSSspriteってやつをやってみることにした。


使ったツールは「Tonttu」
http://collamo.jp/Tonttu/
AIR アプリなのでAdobe AIRをインストール。
http://www.adobe.com/jp/products/air/


最初にまとめる対象の画像を決める。
まず、repeat している背景画像には使えないので対象外に。
しかしrepeat している背景画像の多いこと多いこと。。
とりあえずグラデーションとかで置き換えられそうなとこは
画像を使わずCSSで対応。


次に、コンテンツとしての画像は対象外に。
alt属性が必要な画像は対象外としてユーザビリティの確保。


動的にサイズが変わる画像も対象外に。


まとめる対象の画像が決まったところで
「Tonttu」に放り込んで１枚の画像を生成。
CSSも一緒に生成されるので、それを元に
自分のCSSに適応させる。


微調整しつつなんとなく完成！


細かいとこまで確認していると、メニューの階層を表すアイコン画像が変なことに。
サイズが子要素に依存する要素の左端置いている画像なので、
子要素が２行になると一枚画像の１個下の画像が見えてる（汗
背景色も合ってない。。


ってことでまとめる画像間を広げてたり背景色を調整して
なんとか完成！！
以外に苦戦しました。


しかしメンテナンス性がかなり悪くなったな。
画像の変更やサイズ変更、CSS変更に手間がかかるようになってしまった。。


ちょっと気になったのは、「Tonttu」で１枚画像にする際、
縦に並べてたんだが、4000pxくらいを超えるとそれ以降の画像背景色が
何故か灰色になってしまう現象に遭遇。
まぁまとめる画像絞ったり、画像間の幅を短くしたり調整して
3000pxくらいに抑えたので問題なかったのだが、バグだろうか。。