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

Photoshopで文字や画像を斜めから見た遠近法のような感じにするやり方前のページ

MacでVMware Fusion 4にCentOS 6をインストールしてみた次のページ

関連記事

  1. Screen Capture (by Google)
  2. ブラウザメモ帳

    Web Service

    ブラウザメモ帳がとても便利

    ブラウザメモ帳はブラウザに直接メモが出来る便利なWebサービスです。ブ…

  3. Web Service

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

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

  4. Streaksで特定の曜日をスキップ

    Web Service

    継続日数をカウントできるiPhoneアプリ「Streaks」で特定の曜日をスキップさせるやり方

    普段、何か継続・習慣化させたい事がある場合にはiPhoneアプリの「S…

  5. Web Service

    カラーコードからRGBコードに変換(その逆も)してくれる「RGB変換」

    カラーコードからRGBコードに変換してくれるサービスを探していたら理想…

  6. 目覚まし時計

    Web Service

    朝起きるのに便利!Macで指定した時間にアラームを鳴らしてくれるアプリ「目覚まし時計」

    Macで目覚まし時計をセットしたくてアプリを探していたらよさそうなのが…

コメント

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

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

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP