スプライトシートジェネレーター

スプライトシートジェネレーターは、複数の画像を1枚のスプライトシートに結合し、対応するCSSコードを生成する無料のブラウザベースツールです。CSSスプライトはWeb初期から基本的なパフォーマンス最適化技術であり、多数の小さな画像を1枚の大きな画像にまとめてCSSのbackground-positionで個々のスプライトを表示することでHTTPリクエスト数を削減します。

このツールはPNG、JPG、SVG、GIF、WebP画像をドラッグ&ドロップまたはファイルピッカーで受け付けます。カラム数、スプライト間のパディング、背景色（透明を含む）、カスタムCSSクラスプレフィックスを設定できます。画像を均一なグリッドに配置し、Canvas APIを使用してブラウザ内で結合されたスプライトシートをレンダリングします。データがサーバーに送信されることはありません。

スプライトシートが生成されると、透明チェッカーボード背景でプレビューし、PNGファイルとしてダウンロードし、生成されたCSSコードをコピーできます。CSS出力にはbackground-imageプロパティを持つベースクラスと、各スプライトの正確なwidth、height、background-position値を持つ個別クラスが含まれます。

ツールは各スプライトのサイズとオフセットを示すポジションテーブルも表示し、配置の確認が容易です。スプライトリストでドラッグして並べ替えたり、自動検出ボタンで正方形に近いグリッドレイアウトの最適なカラム数を計算できます。

Webアプリケーション用のアイコンセット作成、HTML5ゲームアニメーション用のスプライトシート作成、メールHTMLテンプレート用の画像最適化など、デザインソフトウェアなしでプロセスを効率化します。

1. ドロップゾーンにファイルをドラッグするか、クリックしてファイルピッカーを使用して画像をアップロードします。複数ファイルを同時にアップロードできます。
2. スプライトリストでドラッグしてスプライトの順序を変更し、最終的なスプライトシートでの位置を調整します。
3. グリッドレイアウトのカラム数を設定するか、自動検出ボタンをクリックして最適なグリッドを計算します。
4. エッジブリードを防ぐためにスプライト間のパディング（ピクセル単位）を設定します。
5. 背景色を選択します（透明、白、黒、またはカスタムカラー）。
6. 必要に応じてCSSクラスプレフィックスを変更します（デフォルトはsprite）。
7. 設定パネルの下で生成されたスプライトシートをプレビューします。
8. PNG ダウンロードをクリックしてスプライトシート画像を保存するか、CSSコピーで生成されたCSSコードをクリップボードにコピーします。
9. スプライトポジションテーブルで各スプライトの正確なサイズとオフセットを確認します。
10. キーボードショートカットCtrl+Shift+CでCSS出力をすばやくコピーできます。