CSS スプライト生成ツール

このツールについて

CSS スプライト生成ツールは、アイコンや小さな画像をまとめて 1 枚のスプライトシートにし、それぞれを表示するための CSS を書き出します。PNG、SVG、GIF、JPG ファイルを追加し、並べ方を選ぶと、スプライト PNG と画像ごとに 1 つのクラスを持つスタイルシートをダウンロードできます。

クラス名はファイル名から作られます：Home Icon.png は .icon-home-icon になり、名前が重複すると番号が付きます。詰め込み レイアウトはビンパッキングを使って、サイズの異なる画像を最小のシートに配置します。縦、横、グリッド は位置が予測しやすいレイアウトです。

使い方

1. 画像を追加… を押してアイコンを選びます（サンプルセットから始めることもできます）。
2. レイアウト と 余白 を選びます。少し余白を入れておくと、ブラウザが拡大縮小したときに隣のアイコンがにじみ出るのを防げます。
3. クラス名の接頭辞 と、background-image で使う スプライトのファイル名 を設定します。
4. Retina 画面向けに画像を 2 倍サイズで描いている場合は @2x を選びます。
5. PNG をダウンロード と CSS をダウンロード を押して（デザインツールやチャットにスプライトを貼り付けるなら 画像をコピー）両方をアップロードし、クラスを使います：<span class="icon icon-home"></span>。

例

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

ヒント

• 一緒に変更されるアイコンは 1 つのスプライトにまとめましょう。シートを作り直すと、すべての位置が変わります。
• CSS で色を変える必要がある単色アイコンには、SVG アイコンフォントやインライン SVG のほうが適している場合があります。