みなさん、お疲れ様です。
今日は珍しくデザイン寄りのお話を。といっても途中からコーディングの話もしますけど。
今回取り組んだのはCSSスプライトです。
CSSスプライトというのは、複数のアイコンなどの画像を一つの画像にまとめて、画像の読み込み回数を減らそうという手法です。制作にあたって以下のサイトを参考にさせていただきました。
CSSスプライトについてあれこれ。（Lobin.jpさん）
まずは画像作成。
今回はPhotoshopを使いました。Illustratorでもできると思うのですが、配置するのがPhotoshopのほうが楽だったので。
図のように一つひとつの画像を同じサイズにして並べていきます。今回は16px角にしています。
このとききちんと画像を並べておくと、コーディングの時に便利です。
では、できた画像をコーディングでサイトに組み込んでみます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div{ | |
| width: 16px; | |
| height: 16px; | |
| background-image: url(sprite.png); | |
| background-size: 200% 400%; | |
| background-position-y: calc(-100% * 0); | |
| } |
by 少し省略していますが、最低限必要な記述は上記。before・afterで入れるとか、文字と置き換えるとか、そのときに応じて入れ方は工夫する必要がありそうです。
widthとheightは画像サイズにします。そして、background-sizeを(画像の数×100%)にします。そしてbackground-positionの値を(-100% * (表示したい画像の順番ー1))にします。一番上なら0番目ってことです。
上のサンプルは2個×4個の画像が並んでいるので、background-sizeは200% 400%となるわけです。で、0番目なので上向きの三角が表示されるというわけですね。
CSS書くときは背景画像の読み込みとか、サイズを一括で指定しておいて、それぞれに画像位置だけ指定してあげるとCSSも短くなって良いですね。
画像はここからどうぞ。
ダウンロード
