無料オンラインCSSスプライトジェネレーター — 画像を結合しCSSを自動生成
当社の無料オンラインスプライトジェネレーターで複数画像から最適化されたCSSスプライトシートを作成。アイコンや画像をアップロードし、レイアウト方向（水平、垂直、グリッド）を選択し、パディングを設定すると、結合されたスプライトシートと正確なbackground-position付きCSSコードが即座に生成されます。CSSスプライトは多数の小画像を1つにまとめてHTTPリクエストを削減し、ウェブサイトの読み込み速度を向上させます。アイコンセット、UI要素、ボタン状態に最適です。すべての処理はブラウザ内でローカルに実行されます。
複数画像（アイコン、ボタン、UI要素）をアップロードして1枚のスプライトシートに結合。
レイアウト方向（水平、垂直、グリッド）を選択し、画像間のパディングを調整。
スプライトシートをプレビューし、生成されたCSSコードをコピー、スプライト画像をダウンロード。
CSSスプライト作成のコツ
- 最良の結果を得るには同じようなサイズの画像を使用してください。サイズ差が大きいと配置が予測しにくくなります。
- グリッドレイアウトは均一サイズのアイコンセットに最適です。水平はボタン状態やナビ項目に適しています。
- 本番環境で使用する際の視覚的な重なりを避けるため、画像間に少なくとも2〜4pxのパディングを確保してください。
よくある質問 — CSSスプライトジェネレーター
CSSスプライトとは何ですか？
CSSスプライトは、複数の小さな画像（アイコン、ボタンなど）を1つにまとめた単一の画像ファイルです。CSSのbackground-positionを使用して、スプライトシートの必要な部分だけを表示します。これによりHTTPリクエストが削減され、ページ読み込み速度が向上します。
CSSスプライトジェネレーターは無料ですか？
はい、完全無料です。登録不要、隠れた費用なし、透かしなし。すべての処理はブラウザ内でローカルに実行されます。
対応画像形式は？
JPG、PNG、WebP、GIF、BMP、AVIF、SVGなど、すべての一般的な画像形式に対応しています。スプライトにはPNGが透明度保持に推奨されます。
生成されたCSSコードはどのように使用しますか？
CSSコードをコピーしてスタイルシートに貼り付けます。ダウンロードしたスプライト画像をプロジェクトのアセットフォルダに配置し、background-imageのURLパスをプロジェクト構造に合わせて更新してください。
どのレイアウトを選ぶべきですか？
水平レイアウトは画像を横一列に配置 — ボタン状態やナビ項目に最適。垂直レイアウトは縦に積み重ね — ドロップダウンメニューやリストに最適。グリッドレイアウトはコンパクトなグリッドに配置 — 均一サイズのアイコンセットに最適です。
高DPI（Retina）画像に対応していますか？
ツールは元の画像寸法を保持します。Retina対応には、2倍サイズの画像をアップロードし、CSSのbackground-sizeを使用してスタイルシートで縮小してください。
スプライト内の画像順序を変更できますか？
画像はアップロードした順序で配置されます。順序を変更するには、画像を削除して希望の順序で再アップロードしてください。