Web Service

CSS Sprite用の画像やコードを簡単に作成してくれるCSS Sprite Generatorを使ってみた

すごい今更なんですがCSS Spriteを初めて試してみました。自分で作るとなると結構大変そうなのでCSS Sprite Generatorというサービスを使ってみたところ、ソッコーで画像が出来上りました。めっちゃ便利っす。しかもCSSで各画像のbackground-positionの位置を記述したコードも教えてくれるので作業が楽になりますね。

[ads_center]

CSS Sprite Generatorの使い方

以下のURLから利用することができます。

使い方は自分の使用したい画像をZIPファイルに圧縮してからアップロードすれば出来上がりです。設定項目は特に変更したりしなくても大丈夫です。試しに出来上がった画像をダウンロードしてみるとこんな感じになりました。

スプライト用画像サンプル01

デフォルトでは縦に並ぶようになってます。ちなみ横に並ばせたい場合は以下の値をVerticalからHorizontalに変更すればいいだけです。

VerticalからHorizontalへ

その下にある水平オフセット、垂直オフセットの数値を変更することで各画像の間隔を変更することができます。デフォルトは50pxになってますね。

感想

こんなに簡単にCSSスプライトができるとは思っていなかったので使ってみてとても良かったです。画像の表示スピードも使い方によっては期待できそうなので、今後も使う機会があれば是非活用していきたいっすね。

関連記事

  1. Web Service

    現在のブラウザサイズをリアルタイムで教えてくれる「What’s My Browser S…

    かなりシンプルでよさげなWebサービスがあったのでご紹介します。現在の…

  2. Web Service

    文字をペーストするだけで文字数をカウントしてくれるChrome拡張機能「文字数カウンタ」

    何気に入れておけば便利かと思ったのでインストールしてみました。文字をペ…

  3. Web Service

    あとで読む「Readability」にChrome/iPhone/Reederなどから簡単に情報を送…

    前から気になっていた、iPhoneアプリのReadabilityをよう…

  4. Web Service

    ChromeでクリックするだけでPocket (Formerly Read It Later)に保存…

    あとで読むためのWebサービスでPocketを使ってるんですが、Chr…

  5. Web Service

    URLを入れるだけでレスポンシブなWebデザインを色々なデバイスで表示確認できる「The Respo…

    スマートフォンやタブレットなんかの色々なデバイスで表示確認することがで…

  6. Web Service

    最大150枚の画像を一気にリサイズできる「Bulk Resize Photos」

    複数の画像を一気にリサイズすることができる便利なサービス「Bulk R…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP