CSSでスプライト画像を使うことは増えてきましたが、作成が面倒なのは変わっていません。専用のソフトウェアも幾つかありますが今回はWebブラウザ上でスプライト画像を作成できるSpritePadを紹介します。

使い方

使い方は簡単で、まずはアイコン画像をSpritePadにドロップしていきます。

画像を移動すると右側のスタイルシート設定も変わっていきます。

アイコンの配置が終わったらFit documentを押します。そうすると画像の大きさが最適化されます。

ダウンロード

作業が終わったらDownloadリンクをクリックします。そうするとアイコンをまとめた画像とスタイルシート設定がダウンロードできます。

スタイルシートは以下のようになります。ドロップしたファイル名がクラス名に使われるのがいい感じです。

.download, .expand, .expand2, .fb-icon, .new, .paper, .ruler-h, .ruler-v, .scale, .settings{
	background: url(sprites.png) no-repeat;
}

.download{
	background-position: -276px -162px ;
	width: 17px;
	height: 16px;
}

.expand{
	background-position: -159px -327px ;
	width: 31px;
	height: 16px;
}

ファイルを結合して、その切り出しをまとめて処理してくれるのが便利です。なお本家SpritePadでは途中保存できる機能がありますが、ソースコードの公開版ではそういった機能がありません。スプライト画像は後々のメンテナンスが面倒な印象があるので、現状を再現できる機能があるとより便利そうです。 SpritePadはPHP製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 SpritePad - Create and edit css sprites Paratron/CSS-SpritePad