ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

使い方

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

複数ファイルをまとめてドロップできます。ドロップしたらドラッグして好きな場所に配置していきます。
複数ファイルをまとめてドロップできます。ドロップしたらドラッグして好きな場所に配置していきます。

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

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

こんな感じにジャストフィットします。
こんな感じにジャストフィットします。

ダウンロード

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

画像ファイル。ファイル名はsprites.pngになります。
画像ファイル。ファイル名はsprites.pngになります。

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

.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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2