SassCSSスプライト・・・それシュワシュワなの?(とりあえず定番ボケは忘れずに)ということでCompassでCSSスプライトをやってみようと思います。ページ読み込みスピード改善のためにCSSスプライトやってやろうじゃないか!と意気込むで手動でセコセコやっちゃうと骨が折れますよね。そこでCompass使うと一瞬でできちゃいます!CSSスプライトで使用する画像を用意する今回はSNSボタンを作ってみたいと思いますので、とりあえずFacebook、Google+、Twitterのアイコンを調達してきます。この画像をimagesフォルダの中にiconフォルダを作って、そこに入れておきます。※iconフォルダじゃなくても大丈夫です。※imagesフォルダはconfig.rbで指定してる画像フォルダにしてください。no-repeat;}こんなCSSがコンパイルされるのと同時に「icon-数字やアルファベット.png」がimagesフォルダにできてます。3px;}以上でそれっぽいものの出来上がり。※htmlとCSSは適当に書き換えてください。関連記事[CSS]奇数とか偶数とかn番目とか忘れてしまうのでメモ。tableで交互に色つけてーとかn番目の要素だけ背景色変えてーとか、よく忘れます・・・歳ですもん。ことで、今回は筆者の本当のメ...記事を読む[CSS3]column-countで紙面デザインのようなテキストレイアウトにしてみよう5ヶ月ぶりの更新ですの。サボってたわけじゃないの。これには話せば長~~~くなるようなストーリーがありまして・・・。いう訳で...記事を読む[CSS3]CSS3で背景画像を複数指定する!IE9以上3歩進んで2歩下がる生活スタイルがすっかり定着の下山です。マウスをカチカチやってるよりキーボードをパチパチやってるほうが好きです。背景画像を画面いっぱいに表示するよ!しかもjqueryでIE7、IE8も対応だよ!背景画像を画面いっぱいに広げるってーのはー男のマロン。栗は美味しいね下山です。Part.2前回の続きです。Flexboxの色々なプロパティを見ていきましょう。Queriesでガラッと見た目を変えちゃいましょう!...記事を読む[Sass,Compass,CSS]Sassの醍醐味Compassを使ってもっと楽しちゃおう!やっぱりSass使い始めたらCompassじゃないっすかねー知らんけど。世の中そんな流れだし実際すばらしいので記事にしちゃうわけよw...記事を読む[css,css3,table]レスポンシブデザインでのテーブル(table)の扱いをまとめてみたレスポンシブデザインで困るのがテーブル(table)ですよね。処理しようか迷うところです。今回はテーブル(table)を...記事を読む[CSS]そろそろFlexboxをまとめてみるIE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。この辺...記事を読む[CSS,border-radius]tableを角を丸くするのって結構めんどいよねすっかり寒くなりましたね。次回の更新は暖かくなるころだと思いますはい。