[Sass,Compass,CSS]Compassで爆速CSSスプライトでSNSボタンでも作っちゃうよ!

Compass
CSSスプライト・・・それシュワシュワなの?(とりあえず定番ボケは忘れずに)

ということでCompassでCSSスプライトをやってみようと思います。
ページ読み込みスピード改善のためにCSSスプライトやってやろうじゃないか!と意気込むで手動でセコセコやっちゃうと骨が折れますよね。
そこでCompass使うと一瞬でできちゃいます!

CSSスプライトで使用する画像を用意する

今回はSNSボタンを作ってみたいと思いますので、とりあえずFacebook、Google+、Twitterのアイコンを調達してきます。
利用させていただいたのは「Graphic Resources SL.」です。
icon
この画像をimagesフォルダの中にiconフォルダを作って、そこに入れておきます。
※iconフォルダじゃなくても大丈夫です。
※imagesフォルダはconfig.rbで指定してる画像フォルダにしてください。

Compassで画像を合体

↓↓↓ コンパイル後 ↓↓↓

こんなCSSがコンパイルされるのと同時に「icon-数字やアルファベット.png」がimagesフォルダにできてます。
imagesフォルダ内
ねっ。すげーでしょ?
それからそれから次の1行を追加すると

↓↓↓ コンパイル後 ↓↓↓

わお!座標を自動で取得してpositionしてくれてるじゃないですか!

あとはhtmlとCSSを書いて

html

html適当でごめんなさい・・・

CSS

以上でそれっぽいものの出来上がり。
※htmlとCSSは適当に書き換えてください。
とりあえずこうなる

まとめ

便利ですねー
楽ですねー

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク