CSSスプライト生成

CSSスプライトとは？

CSSスプライト（Sprite）は複数のアイコンを1枚の画像に合成し、background-positionと組み合わせてページに必要な部分を表示する手法です。

ブラウザが発行する画像リクエスト数を大幅に削減できるため、フロントエンドのパフォーマンス最適化でよく使われる手段です。

使用方法

3ステップでスプライトを生成します：

• 複数の画像をアップロードします（最大40枚）。
• 水平・垂直・グリッドのいずれかのレイアウトを選択し、間隔を調整します。
• 「生成」をクリックしてスプライトをダウンロードし、CSSコードをコピーします。

ヒント

• 事前にアイコンのサイズを揃えておくと、スプライトが整然とします。
• PNG形式なら透過背景を保持できるため、アイコンに適しています。
• 生成されたCSSは相対パス sprite.png を使用しているため、実際の配置場所に合わせて調整してください。