CSS スプライト生成ツール

CSS スプライトとは？

CSS スプライトは、複数の小さな画像（アイコン、ボタン、バッジ）を 1 枚にまとめた画像ファイルで、CSS ルールを使って親画像の一部だけを一度に表示する手法です。ブラウザは 20 個のアイコンファイルを個別に読み込む代わりに、1 枚の PNG スプライトをダウンロードし、background-position で各要素の領域だけを表示します。この技術は 2000 年代半ばに普及し、HTTP リクエストを減らしてアイコン密集型のインターフェースを高速化する信頼できる手段として今日も使われています。

スプライトの各セルは CSS で 4 つの数値によって定義されます。幅、高さ、そして親画像をずらして目的のアイコンを要素の枠内に収めるための負の background-position です。縦方向スプライトでは X オフセットが 0 で Y オフセットがアイコンごとに負へ増加し、横方向スプライトでは X オフセットが増加して Y オフセットが 0 に保たれます。本ツールは合成後の PNG と一致する CSS を同時に生成し、スタイルシートにそのまま貼り付けられます。

このツールができること

CSS スプライト生成ツールは任意の数の入力画像をキャンバス上に 1 枚のスプライトとして配置します。レイアウトを完全に定義する 3 つのパラメータを制御できます：

• 方向。縦方向は画像を上から下に積み重ね（幅が近いアイコンセットに最適）、横方向は左から右に並べます（高さが近い場合に最適）。生成器がキャンバス寸法を自動計算します。
• 間隔。スプライトセル間のピクセル間隔。0 で密に詰めた 1 枚の画像に、適度な間隔でプレビューで各セルを見分けやすくし、CSS の丸め誤差によるにじみを防ぎます。
• 背景。透明は元のアルファチャネルを保持（様々な背景に重ねる PNG アイコンに最適）、白はキャンバスを #ffffff で塗りつぶします（JPG として配信したり白い面に表示する場合に有用）。

最終キャンバスは sprite.png という PNG として書き出され、コピー可能なテキストエリアにそのまま使える CSS ブロックが生成されます。各ルールは .sprite-N という名前で、N は追加順の 1 始まりの番号です。

CSS スプライトを使う場面

ページやアプリが多数の小さな画像を同時に表示し、リクエスト数と読み込みのちらつきを減らしたい場合にスプライトは有用です。一般的なシナリオ：

• アイコンセット。UI アイコン（ホーム、検索、メニュー、閉じるなど）を 1 枚にまとめ、ツールバーを 1 リクエストで読み込み。
• ボタンの状態。デフォルト、ホバー、アクティブ状態を並べて、インタラクション時に background-position を切替。
• 評価の星。満星、半星、空星を縦に積み重ね、位置をずらして任意のスコアを表示。
• 旗やバッジ。国旗や達成バッジを横に並べ、要素ごとに 1 つずつ表示。
• メールテンプレート。画像の読み込みが遅い・不安定な環境で外部リクエストを削減。
• レガシーブラウザ。アイコンフォントやインライン SVG が使えない場合、PNG スプライトは旧版 IE を含むすべての環境で動作します。

インライン SVG やアイコンフォントをサポートするモダンなプロジェクトでは、それらの技術が鮮明さと色制御で優れることが多いです。しかし多数のラスター PNG アイコンがある場合や単一ファイルのアセットバンドルが必要な場合、CSS スプライトは依然として有力です。

スプライトの生成手順

本ツールでスプライトを作るのは数秒で、すべてブラウザ内で完結します。以下の 4 ステップに従ってください：

1. 画像を追加。アップロードエリアをクリックするか、複数の PNG、JPG、WebP、GIF、BMP ファイルをドラッグします。各画像はローカルでデコードされ、順序どおりソースリストに追加されます。最初の_batch_の後も追加可能です。
2. レイアウトを設定。縦方向または横方向を選び、間隔スライダー（0〜40 px）を調整し、透明か白かの背景を選びます。
3. 生成。「スプライトを生成」をクリック — ツールがすべての画像を 1 枚のキャンバスにパックし、各セルの位置を計算し、プレビューを描画して、一致する CSS をテキストエリアに書き出します。
4. ダウンロード＆コピー。「sprite.png をダウンロード」で親画像を保存し、「CSS をコピー」でルールをクリップボードにコピーしてスタイルシートに貼り付けます。

すべてのステップは JavaScript と Canvas API によりブラウザ内で実行されるため、画像がサーバーへアップロードされることはありません。スプライト生成は完全にプライベートで、機密アセットにも適しています。

スプライトのレイアウトのコツ

より綺麗なスプライトを作るための実用的なコツをいくつか紹介します。追加前にアイコンを似た寸法でソートすると、パックされたシートがコンパクトになります。寸法が混在しても機能しますが透明の隙間ができます。アイコンセットでは、幅がほぼ等しければ縦方向が、高さがほぼ等しければ横方向が適しています。1〜2 px の間隔で、ブラウザがスケーリング時に background-position を丸める際のサブピクセルにじみを防げます。親画像は常に PNG（本ツールは常に PNG を書き出します）で非可逆に保ち、アイコンの輪郭を鮮明にします。様々な面に重ねるアイコンには透明背景を推奨します。最後に、追加前にソート可能な名前（01-home、02-search…）でソースファイル名を付けてください。CSS クラスの番号は入力順に従うためです。