CSS スプライトシート生成

画像を並べてプレビューを確認できます。生成される CSS には画像ごとの実寸と背景位置が入り、ZIP には PNG とスタイルシートがまとめて入ります。

ブラウザ内でローカルに実行

· PNG · CSS · ZIP

sprite.png · sprite.css

画像を PNG スプライトシートにまとめ、CSS を書き出す手順

選んだ画像を 1 枚の透過 PNG に描き、background-position で各画像を元の位置に戻す CSS を出力します。キャンバスでシートを組み立て、JSZip でアーカイブを作る処理はすべてページ内で完結し、アップロードは行いません。

セルの大きさは選択した画像の中で最も大きい画像に合わせ、各画像はセルの中央に配置します。CSS は画像ごとの実寸を幅・高さとして保持するため、16 × 16 のアイコンと 64 × 4 の帯を拡大縮小せず同じシートに収められます。

ファイル選択かドロップで最大 50 枚の画像を追加します。各行にファイル名とサイズが表示され、矢印で並べ替え、削除ボタンで 1 枚ずつ外せます。

配置（グリッド / 単一行 / 単一列）を選びます。列はグリッドに適用され、1〜20 を指定できます。

パディング（0〜128 px。セルの周囲と間に入る余白）と、生成されるセレクターのクラスプレフィックスを設定します。

「スプライトを生成」を押すと、ファイル数・シート寸法・PNG サイズ・CSS ルール数がパネルに表示され、プレビューにシートが出ます。

「CSS をコピー」でスタイルシートをクリップボードへ、「PNG + CSS をダウンロード」で voritools-sprite.png と voritools-sprite.css を含む voritools-css-sprite.zip を保存します。「クリア」は一覧・設定・書き出し結果をまとめて消します。

配置・クラス名・キャンバスの上限

書き出される CSS の中身

ファイルの先頭は基底クラス .sprite-<プレフィックス>（display: inline-block、background-image: url("voritools-sprite.png")、background-repeat: no-repeat）で、その後に画像ごとのルール .<プレフィックス>-<名前> が幅・高さ・シート内の負の background-position とともに続きます。

プレフィックスとファイル名は同じ規則で正規化します。小文字に変換し、英数字以外の連続は 1 つのハイフンにまとめ、先頭と末尾のハイフンは削除します。my icon.png は my-icon になり、同名が重複すると -2、-3 が付き、正規化後に何も残らないプレフィックスは icon に戻るため、基底クラスと各ルールが必ず一致します。

ページが適用する上限

1 回の実行で扱えるのは最大 50 ファイル・250 MB まで、キャンバスは 1 辺 16384 px かつ合計 3200 万 px を超えられません。これを超えると「生成されるキャンバスが大きすぎるため、ブラウザーで安全に処理できません。」で停止し、何も書き出しません。

51 枚目は黙って捨てません。上限を超えた枚数をステータス行に表示し、一覧には先頭 50 枚を残します。列とパディングは使用前に整数へ丸め（2.5 と入力すると 3 列）、入力欄も実際に使った値へ更新されるので、キャンバスの計算と CSS の位置がずれません。

処理の場所と対応形式

処理はすべてブラウザー内で行います。ページ読み込み後に画像を追加し、生成・CSS コピー・ZIP ダウンロード・一覧のクリアを行った検証（en / fr / ja）では、ネットワークリクエストは 1 件も発生せず、画像が端末の外に出ることはありません。

シートはブラウザーの画像デコーダーで描画するため、PNG・JPEG・SVG は通常どおり読み込めます。壊れたファイルや空のファイルは「このファイル形式はこのブラウザーではデコードできません。」として拒否されます。width と height のない SVG はブラウザーの既定サイズ 300 × 150 で描画されます。