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. Web Service

    話題のiPhoneのTODO管理アプリ「Clear」を使ってみた

    いくつかの記事で話題になっていたTODO管理アプリのClearがいつの…

  2. Web Service

    CSS3を使って超カンタンにクールなボタンを作ることができるジェネレーター「Button Maker…

    CSS3を使ってとても簡単にクールなボタンを作ることができるジェネレー…

  3. Web Service

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

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

  4. Web Service

    CSSで多彩なエフェクトをつけることができるジェネレーター「CSSPainter」

    CSSで多彩なエフェクトをつけることができるジェネレーター「CSSPa…

  5. Load Info - gif generator

    Web Service

    ローディング中に表示させるアニメーションGIFを作成できるジェネレーター「 Load Info &#…

    ローディング中に表示させるアニメーションGIFを手軽に作成することがで…

  6. ヘボン式ローマ字

    Web Service

    ヘボン式ローマ字を使う時の注意事項や便利な一覧表、入力変換サービスなど

    ヘボン式ローマ字を使う時の注意事項や便利な一覧表、入力変換サービスなど…

コメント

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

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

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP