CSS スプライト生成
無料オンライン CSS スプライト生成ツール
CSSスプライトとは
CSSスプライトは、複数の小さな画像を1つの画像ファイル（スプライトシート）に結合します。CSSのbackground-positionを使用して、結合ファイルから個々の画像を表示します。HTTPリクエスト数を削減し、ページ読み込みパフォーマンスを向上させます。
CSSスプライトの作成方法
複数の画像をアップロードします。レイアウト（水平、垂直、グリッド）を選択します。ツールが1つのスプライトシートに結合し、各画像のbackground-position値を含むCSSを生成します。
▶CSSスプライトはまだ有用ですか？
HTTP/2マルチプレクシングにより、スプライトのパフォーマンス上の利点は減少しました。しかし、多くの小さなアイコンを提供する場合や、単一ファイルキャッシュが必要なアイコンシステムでは依然として役立ちます。
▶スプライトに最適なレイアウトは？
水平レイアウトは少数の画像にコンパクトです。グリッドレイアウトは同サイズの多数のアイコンに適しています。垂直レイアウトはすべての画像の幅が同じ場合に便利です。
▶生成されたCSSの使い方は？
CSSはスプライトシートをbackground-imageとして使用し、各アイコンにbackground-positionで位置を指定します。生成されたクラスをHTML要素に適用します。