山を登る人のためのコミュニティサイト
トップ 地図 カレンダー 花辞典

IMGタグのCSSスプライト簡単作成

アイコンやボタン等の画像をひとつにまとめてIMGタグ用のCSSスプライトを作成します。
これからウェブサイトを作る場合はもちろん。すでに作成済みのウェブサイトのIMGタグをCSSスプライト化するのにも使えます。
<img src="picture.png">
 ↓ IMGタグを置き換える
<img src="d.png" style="background:url(sprite.png) 0px 0px;width:15px;height:15px;">

以下の１で複数の画像をアップロードし、３の「CSSスプライト作成」をクリックするだけです。

１．画像ファイルアップロード
・PNG、GIF、JPEG形式が使えます。
・繰り返しアップロードすることで、CSSスプライトを構成する複数の画像をアップロードします。
・複数画像をZIP圧縮して、まとめてアップロードすることもできます。

２．アップロードした画像を確認
アップロードした画像がここに表示されます。
・不要な画像があれば削除してください。
・さらにアップロードすれば追加されます。

３．CSSスプライト作成
←クリック
画像間隔 X px Y px
CSSスプライト画像の保存形式