CSS スプライトのコードを簡単に生成

CSS スプライトのコードを簡単に生成 – qazqaz noteCSSスプライト（CSS Sprite）とは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数とサーバへのリクエストを減らすことで、サイトの表示を速めることができます。

以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。↓の画像は投稿当時にYouTubeで使用されていたCSSスプライトで使用されていた元画像です。

このCSSスプライトを利用する際、バックグラウンドでXとY方向の指定をしなくてはいけないのですが、画像を適当に作ってしまうと何pxなのか分かりにくく・・・となってしまいます（泣）

.sprite {
background: url('imgs/test-sprite-grey.png') no-repeat -30px -28px;
width: 395px;
height: 178px;
}

そんな時に利用したいのが、「Sprite Cow」です。
Sprite Cow – Generate CSS for sprite sheets

使い方はいたって簡単ｗ。
まず、画像をアップし、範囲をドラッグ＆ドロップで指定するだけで、画面下部にコードが生成されます♪

また、範囲の微調整はサーバ側でやってくれるのでぴったりと範囲指定出来ます！

アイコンのような画像なら、クリック一発で。複数を跨いで（離れて）いる画像（文字等）はドラッグアンドドロップで範囲指定可能。

他にも似たようなツールはあるが、個人的には一番使いやすいのではないかと思ったり。よろしければどうぞ。