CSS Sprite Generator

使い方

1. 画像を選択で 2 つ以上のファイルを選びます。複数選択に対応し、並び順は選択した順になります。
2. レイアウトを選びます。横並びは 1 行、縦並びは 1 列、グリッドは指定した列数で折り返します。
3. 画像の間に透明な余白を入れたい場合は間隔を設定します。グリッドのときは列数も設定します。
4. スプライトを作成を押します。canvas に合成結果が表示され、各画像のサイズとオフセットが一覧に出て、CSS 欄に画像ごとのルールが出力されます。
5. PNG をダウンロードしてスタイルシートの近くに保存し、CSS を貼り付けます。ファイル名を sprite.png 以外にする場合は、ベースクラス内のパスを書き換えてください。

よくある用途

• アイコンセット —— 十数個の小さなアイコンを十数回のリクエストではなく 1 回にまとめる。
• ゲームや UI のタイル —— 同じサイズのタイルをグリッドに並べ、オフセットを出力からそのまま読む。
• 既存プロジェクトの改修 —— ビルドプラグインを入れずに、手持ちの素材からスプライトを生成する。
• 手書き CSS の前のサイズ確認 —— オフセットはツールに計算させ、自分でピクセルを数える必要をなくす。

よくある質問

Q: データはアップロードされますか？ A: いいえ。画像はブラウザ内の canvas でデコード・合成され、PNG もローカルで生成されます。未公開の素材が端末の外に出ることはありません。

Q: 画像の周りが透明なのはなぜ？ A: canvas は空の状態から始まり、読み込んだ画像だけを描画するため、描画していないピクセルは透明のままです。元画像の透明部分も保持されます。

Q: CSS のクラス名はどう決まりますか？ A: ファイル名を小文字化し、英数字以外をハイフンに置き換えて sprite- を付けたものです。変換後に空になるファイル名は icon-1、icon-2 のようにフォールバックします。

Q: スプライトはどれくらい大きくできますか？ A: ブラウザが確保できる canvas の範囲までです。大きすぎるとエンコードに失敗することがあり、その場合は壊れたファイルを渡すのではなく、きちんとエラーを表示します。