CSS スプライト生成ツール
複数の画像を1つの CSS スプライトシートに結合。画像をアップロード、background-position CSS ルールを自動生成、スプライト PNG をダウンロード——すべてブラウザ内で完結、アップロード不要。
画像をアップロードして「スプライト生成」をクリックすると結果が表示されます。
CSS スプライト生成ツールについて
この CSS スプライト生成ツールは、すべてブラウザ内で完結します。複数の画像をアップロードし、レイアウトとパディングオプションを選択して「スプライト生成」をクリックすると、1つのスプライトシートに結合されます。background-position CSS ルールを生成し、スプライト PNG をダウンロードできます。アップロードは一切なく、JavaScript と Canvas API によってデバイス上で処理されます。
使い方
- ファイル入力をクリックして複数の画像（PNG、JPG、GIF、SVG）を選択します。
- レイアウト（水平または垂直）を選択し、オプションでパディングを追加します。
- 必要に応じて CSS クラス接頭辞を設定します（デフォルトは
sprite）。 - 「スプライト生成」をクリックして画像を結合し CSS ルールを生成します。
- 「PNG ダウンロード」でスプライトシートを保存、「CSS コピー」でルールをコピーします。
CSS スプライトとは
CSS スプライトは、複数の小さな画像を含む単一の画像ファイルです。CSS background-position を使用してスプライトの一部のみを表示することで、ページの HTTP リクエスト数を減らし、読み込み性能を向上させることができます。この技術はアイコン、ボタン、その他の UI 要素に広く使用されています。
よくある質問
対応画像形式は？ PNG、JPEG、GIF、SVG です。透明度を保持するためスプライトは PNG で出力されます。
CSS クラス名はどう生成されますか？ 各クラス名は画像ファイル名（拡張子なし）に基づき、選択した接頭辞を付けます。例：icon-home.png に接頭辞 sprite で .sprite-icon-home になります。
画像はアップロードされますか？ いいえ。すべての操作はブラウザのローカルで行われ、画像がデバイスから外に出ることはありません。