CSSスプライト・・・それシュワシュワなの?(とりあえず定番ボケは忘れずに)
ということでCompassでCSSスプライトをやってみようと思います。
ページ読み込みスピード改善のためにCSSスプライトやってやろうじゃないか!と意気込むで手動でセコセコやっちゃうと骨が折れますよね。
そこでCompass使うと一瞬でできちゃいます!
CSSスプライトで使用する画像を用意する
今回はSNSボタンを作ってみたいと思いますので、とりあえずFacebook、Google+、Twitterのアイコンを調達してきます。
利用させていただいたのは「Graphic Resources SL.」です。
この画像をimagesフォルダの中にiconフォルダを作って、そこに入れておきます。
※iconフォルダじゃなくても大丈夫です。
※imagesフォルダはconfig.rbで指定してる画像フォルダにしてください。
Compassで画像を合体
1 2 |
@import "compass"; @import "icon/*.png"; /* 元の画像が入っているフォルダ名(icon) */ |
↓↓↓ コンパイル後 ↓↓↓
1 2 3 4 |
.icon-sprite { background-image: url('../images/icon-s3dfad84db6.png'); background-repeat: no-repeat; } |
こんなCSSがコンパイルされるのと同時に「icon-数字やアルファベット.png」がimagesフォルダにできてます。
ねっ。すげーでしょ?
それからそれから次の1行を追加すると
1 |
@include all-icon-sprites; |
↓↓↓ コンパイル後 ↓↓↓
1 2 3 4 5 6 7 8 9 10 11 |
.icon-facebook { background-position: 0 0; } .icon-google { background-position: 0 -32px; } .icon-twitter { background-position: 0 -64px; } |
わお!座標を自動で取得してpositionしてくれてるじゃないですか!
あとはhtmlとCSSを書いて
html
1 2 3 |
<a href="#" class="icon-facebook">facebook</a> <a href="#" class="icon-google">google+</a> <a href="#" class="icon-twitter">Twitter</a> |
html適当でごめんなさい・・・
CSS
1 2 3 4 5 6 7 8 |
a { display: block; width: 32px; height: 32px; text-indent: -9999px; float: left; margin-right: 3px; } |
以上でそれっぽいものの出来上がり。
※htmlとCSSは適当に書き換えてください。
まとめ
便利ですねー
楽ですねー