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

    CSSで吹き出しをサクっと作ることができる便利なツール「cssarrowplease」

    CSSでとても簡単に吹き出しを作ってくれる便利なツール「cssarro…

  3. Web Service

    iPhoneの画像編集アプリ「Filterstorm」を使ってみた

    面白そうだったので使ってみました。iPhoneで画像編集なんてあんまり…

  4. Web Service

    ATOK Pad(Mac)を使ってみたら呼び出しも簡単で使いやすかった

    ATOK Pad(Mac)をインストールしてみました。ちょっとしたメモ…

  5. Web Service

    ボタン1つでCSSファイルを軽量化!圧縮や整形が簡単にできる「csCSSc」

    CSSファイルを簡単に圧縮したり整形したりできるツール「csCSSc」…

  6. Web Service

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

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

コメント

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

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

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP