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

CSS スプライトのコードを簡単に生成 | qazqaz notehttp://www.spritecow.com/CSSスプライト(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

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

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

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください