CSS スプライト生成

機能

• 複数画像を一度にドロップして1枚の PNG スプライトに結合
• 各アイコンの CSS（background-position と width / height）を自動生成
• 3つの並べ方：自動で詰める・1行・1列
• アイコン間の余白を調整でき、拡大縮小時の滲みを防げます
• 2倍解像度モード：位置とサイズを半分にし background-size も出力
• クラス名はファイル名から生成（日本語・空白・引用符は安全な名前に変換）
• 同名には連番を付け、2つのアイコンが1つの規則を共有しないようにします
• CSS はテキスト成果物として独立して出力。コピーも .css として保存も可能
• 画像は送信しません。オフラインでも使えます

使い方

1. 複数の小さなアイコンをまとめて点線の枠にドラッグします（複数選択でも可）
2. 並べ方と余白を選びます。2倍解像度の画像なら該当項目をオンにします
3. 結合した PNG をダウンロードし、生成された CSS をコピーします
4. PNG をプロジェクトに置き、`url()` を実際のパスに向けます

よくある質問

今でもスプライトは必要ですか？

場面によります。HTTP/2 と HTTP/3 でリクエストの数は以前より安くなり、SVG アイコンは `<symbol>` として1つにまとめて埋め込めます。しかし小さなビットマップアイコンが多数ある場合（ゲーム UI、古い管理画面、ツールバー）は、今もスプライトが最も簡単です：数十回のリクエストが1回になり、ビルド手順も変えずに済みます。逆に十数個なら、素の SVG のほうが分かりやすく色の変更も簡単です。

余白（gap）を 1〜2px 残すのはなぜですか？

`background-size` でスプライト全体を拡大縮小すると（高解像度対応の定番手法）、ブラウザが双線形補間を行い、あるアイコンの端をサンプリングする際に隣のアイコンの端も拾ってしまいます。これが別の色の筋として現れます。1〜2px の完全に透明な余白がその経路を断ちます。等倍なら 0 で構いません。

2倍解像度モードは何をしますか？

入力を2倍の素材として扱います：各アイコンの `width` / `height` と `background-position` を CSS 上で半分にし、基本クラスに `background-size`（スプライトの半分の寸法）を書きます。これで通常の画面では論理サイズで表示され、高解像度の画面では2倍の画素で描画されてアイコンが鮮明になります。間違えるとアイコンが倍の大きさになる（半分にしていない）か、左上の一部しか表示されません（background-size が無い）。

クラス名はどう決まりますか？

ファイル名から拡張子を除き、小文字の英字・数字・ハイフンだけに正規化し、設定した接頭辞を付けます。正規化は必須です：クラス名は CSS と HTML の両方に入り、日本語や空白、引用符があるとセレクタが無効になったり属性から飛び出したりします。使える文字が残らない場合（例：アイコン.png）は位置から `icon-1` のように付け、名前が衝突した場合は後ろに連番（`-2`、`-3`）を付けて規則同士の上書きを防ぎます。