CSSスプライトジェネレーター（アイコンを1枚の画像にまとめる）

CSSスプライトジェネレーター（アイコンを1枚の画像にまとめる）: 用途

スプライトは複数のアイコンを1枚の画像にまとめ、CSSがbackground-positionで各場所に適切な部分を表示します。ブラウザーは10回ではなく1回のリクエストで済み、ホバー用のアイコンもちらつきません。

アイコン、配置（グリッド、横一列、縦一列）、間隔、形式を選びます。スプライトをダウンロードし、アイコンごとのクラス（ファイル名がクラス名になります）、幅、高さ、位置を含むCSSをコピーしてください。Retinaオプションでは、2倍のサイズで作ったアイコンを半分で表示し、高密度ディスプレイでも鮮明にします。

使い方

1. アイコンを選びます。
2. 配置、間隔、形式を調整します。
3. スプライトをダウンロードして、CSSをコピーします。

使うタイミング

• ホバー付きのSNSアイコン。
• 国旗やバッジ。
• HTMLのゲームのスプライト。

よくある質問

スプライトは何のためにありますか？

ブラウザーが10個のアイコンを個別にダウンロードする代わりに、1枚の画像だけをダウンロードし、CSSがbackground-positionで各場所に適切な部分を表示します。サーバーへのリクエスト数が減り、ホバー状態がすでに読み込まれているため、マウスを乗せたときにアイコンがちらつきません。

HTTP/2でもスプライトを使う価値はありますか？

HTTP/2では、小さなファイルが多い場合のコストがかなり下がったため、以前よりメリットは小さくなっています。ホバー用のアイコンセット、国旗、バッジ、canvasのゲームや、インラインSVGを使えない場合には、今でも役立ちます。

Retinaオプションとは何ですか？

アイコンが表示サイズの2倍で作られている場合はこのオプションにチェックを入れます。CSSがbackground-sizeで各アイコンを半分の大きさで表示するので、スマートフォンやMacなどの高密度ディスプレイでも鮮明になります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール