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

    エバノートにノートリンク機能があることを知らなかったので使ってみた

    エバノートにノートリンク機能なんてのがあるみたいですね。知らなかったで…

  2. Web Service

    あとで読むサービス「Read it Later」をMacで快適に読むアプリ「ReadNow」

    iPhoneであとで読むアプリとしてRead it Laterを使って…

  3. Web Service

    iPhoneからWordPressの投稿や固定ページ編集、コメント承認もできるアプリ「WordPre…

    前回iPhoneからWordPressの記事を投稿、編集できるアプリ「…

  4. Web Service

    iPhoneでWikipediaを調べるためのアプリ「Wikiamo」が便利すぎる

    最近色々調べものをする機会が多くて、何かiPhoneで便利なアプリでも…

  5. iPhoneの天気予報アプリ「そら案内」

    Web Service

    iPhone定番人気の天気予報アプリの「そら案内」を使ってみた

    前回、Mac版の「そら案内」を使ってみたら素晴らしすぎるアプリだったの…

  6. Web Service

    PhotoshopのようなインターフェースのCSS3ジェネレーター「Layer Styles」

    Photoshopに慣れてる人なら違和感なく使いこなせそうですね。CS…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP