makurazaki.org
[Sass,Compass,CSS]Compassで爆速CSSスプライトでSNSボタンでも作っちゃうよ! | Maku_zin Ver2.1.1
CSSスプライト・・・それシュワシュワなの?(とりあえず定番ボケは忘れずに) ということでCompassでCSSスプライトをやってみようと思います。 ページ読み込みスピード改善のためにCSSスプライトやってやろうじゃないか!と意気込むで手動でセコセコやっちゃうと骨が折れますよね。 そこでCompass使うと一瞬でできちゃいます! CSSスプライトで使用する画像を用意する 今回はSNSボタンを作ってみたいと思いますので、とりあえずFacebook、Google+、Twitterのアイコンを調達してきます。 利用させていただいたのは「Graphic Resources SL.」です。 この画像をimagesフォルダの中にiconフォルダを作って、そこに入れておきます。 ※iconフォルダじゃなくても大丈夫です。 ※imagesフォルダはconfig.rbで指定してる画像フォルダにしてください。 Compassで画像を合体 ↓↓↓ コンパイル後 ↓↓↓ こんなCSSがコンパイルされるのと同時に「icon-数字やアルファベット.png」がimagesフォルダにできてます。 ねっ。すげーでしょ? それからそれから次の1行を追加すると ↓↓↓ コンパイル後 ↓↓↓ わお!座標を自動で取得してpositionしてくれてるじゃないですか! あとはhtmlとCSSを書いて html html適当でごめんなさい・・・ CSS 以上でそれっぽいものの出来上がり。 ※htmlとCSSは適当に書き換えてください。 まとめ 便利ですねー 楽ですねー