IMGタグ置換えCSSスプライトを簡単に作成できるジェネレーターツール

ウェブサイトを構成するアイコンやボタン等の細かい画像がたくさんあると、ウェブページを表示したときに大量のリクエストが発生します。サーバーへリクエストしてレスポンスが返りはじめるまでには、数百ミリ秒程度の時間がかかりますし、同時リクエスト数にも制限があります。それでウェブページがすべて表示されるのに時間がかかることになります。

細かな画像を全部ひとまとめにした大きな画像をひとつ作成しておいて、その中から一部分ずつ切り出して使う手法があります。それをCSSスプライトと呼びます。
ひとつの画像ファイルサイズこそ大きくなりますが、リクエスト回数が一回で済むことから結果的には速くダウンロードできます。

これからウェブページを新しく作られるときには、CSSスプライトを使って作ることができますが、すでに作成済みのウェブサイトをCSSスプライト化したいという要求も多いかもしれません。そこで、IMGタグで作られている部分をそのままCSSスプライトに置き換えるためのCSSスプライトジェネレーターを作成しました。すでにあるウェブサイトのIMGタグをCSSスプライト化する場合や、これから新たに作るウェブサイトをCSSスプライトで作るのにも使えます。

CSSスプライトジェネレーター

このCSSスプライトジェネレーターは、超簡単操作を目指して作成しました。わずか２ステップのみで使えます。
１．画像をアップロードする。
２．作成ボタンをクリックする。
これだけです。
あとは、生成された画像をダウンロードし、通常のIMGタグに代わって生成されたコードを埋め込んでください。



使い方は、使ってみれば分かると思いますが、いちおう以下に詳しく解説します。

１．画像ファイルをアップロードする。

CSSスクリプト化したいアイコンやボタン等の画像を用意してアップロードしてください。
PNG、GIF、JPEG形式が使えます。
何度でも追加でアップロードできますので、ひとつひとつの画像を順番にアップロードしていくこともできますが、複数の画像をZIP圧縮でまとめてアップロードすることもできます。

２．アップロードした画像を確認する。

アップロードした画像が表示されていますので、問題ないか確認してください。
不要なものが含まれているときはここで削除できます。
最終的にソートされて作成されますので、表示順序はあまり気にする必要ありません。

３．CSSスプライトを作成する。

「CSSスプライト作成」ボタンをクリックしてください。
作成されるCSSスプライト画像の中での画像の間隔や、出力する画像の形式を入力できますが、通常は何も触る必要ありません。

４．できあがり

もうできていますので、「CSSスプライト画像ダウンロード」をクリックして、アップロードした画像がひとつにまとめられているCSSスプライト画像をダウンロードし、保存してください。
さらに「ダミー画像ダウンロード」をクリックして「d.png」というファイルをダウンロードします。これは1×1サイズの透過画像です。IMGタグのSRC属性にダミーとして記述するために必要なファイルです。
この２つの画像ファイルは、ウェブページと同じディレクトリに置くか、パスを変えたい時には、HTMLコードの該当ファイル名部分を書き換えてください。
生成されたテキストボックスのHTMLコードをコピーして、あなたのウェブページに貼り付けて使います。１行に１つの画像になっていますので、行単位にコピーしてお使いください。
「クラス定義に分ける」をクリックすると、STYLE属性を別に記述する形式のHTMLコードを生成できます。これは、同じ画像を複数回使う場合や、スプライト画像のファイル名記載箇所が一ヶ所になるので、パスを書き換えるときに便利です。

onmouseoverで画像を切りかえるような用途の場合には、HTMLコードの「0px 0px;width:15px;height:15px;」等と書かれている座標部分のスタイルが書き換わればよいことに気づかれるかもしれません。具体的には「onmouseover="this.style.backgroundPosition='0px -80px;width:15px;height:15px;'" onmouseout="this.style.backgroundPosition='0px 0px;width:15px;height:15px;'"」のようにできます。



以上、超簡単にCSSスプライトを作成できる方法です。
あなたのウェブサイトの構築にお役立てください。