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

    feedlyの登録者数を取得できる「Feedly Subscribers Checker 2」

    自分のブログをfeedlyに登録してくれている人の数を知りたいという方…

  2. Web Service

    検索結果を見やすくしてくれるChrome拡張機能「Google検索でキーワードをハイライト表示」

    PCブラウザでChromeをお使いの方に便利な拡張機能のご紹介です。「…

  3. HTML特殊文字変換ツール

    Web Service

    テキスト内のHTML特殊文字を変換してくれる便利なツール

    テキスト内にあるHTML特殊文字を変換してくれる便利なツールがあったの…

  4. Web Service

    Mac版Pocketがリリースされたのでさっそく使ってみた!

    あとで読むサービスのPocketがMacのアプリでついに登場していたの…

  5. Web Service

    かっこいいボタンやフォーム、かわいいリボンなんかが作れるCSSジェネレーター「Live Tools」…

    とても簡単にかっこいいボタンやフォームが作れちゃうCSSジェネレーター…

  6. iPhoneデフォルトアプリ「天気」

    Web Service

    iPhoneのデフォルトアプリ「天気」が意外と使いやすかった

    iPhoneにデフォルトで入っているアプリ「天気」が意外と使いやすかっ…

コメント

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

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

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP