みなさん、お疲れ様です。

今日は珍しくデザイン寄りのお話を。といっても途中からコーディングの話もしますけど。

今回取り組んだのはCSSスプライトです。
CSSスプライトというのは、複数のアイコンなどの画像を一つの画像にまとめて、画像の読み込み回数を減らそうという手法です。制作にあたって以下のサイトを参考にさせていただきました。
CSSスプライトについてあれこれ。（Lobin.jpさん）

まずは画像作成。
今回はPhotoshopを使いました。Illustratorでもできると思うのですが、配置するのがPhotoshopのほうが楽だったので。

図のように一つひとつの画像を同じサイズにして並べていきます。今回は16px角にしています。

このとききちんと画像を並べておくと、コーディングの時に便利です。

では、できた画像をコーディングでサイトに組み込んでみます。
 

 
少し省略していますが、最低限必要な記述は上記。before・afterで入れるとか、文字と置き換えるとか、そのときに応じて入れ方は工夫する必要がありそうです。
widthとheightは画像サイズにします。そして、background-sizeを(画像の数×100%)にします。そしてbackground-positionの値を(-100% * (表示したい画像の順番ー1))にします。一番上なら0番目ってことです。
上のサンプルは2個×4個の画像が並んでいるので、background-sizeは200% 400%となるわけです。で、0番目なので上向きの三角が表示されるというわけですね。
CSS書くときは背景画像の読み込みとか、サイズを一括で指定しておいて、それぞれに画像位置だけ指定してあげるとCSSも短くなって良いですね。
 
画像はここからどうぞ。
ダウンロード