SpritePad - ファイルをどんどん追加してスプライト画像を作成
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