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. Responsive Design Bookmarklet

    Web Service

    レスポンシブなデザインを瞬時に確認する為のブックマークレット「Responsive Design B…

    シンプルですが、かなり便利なブックマークレットを見つけたのでご紹介しま…

  2. Web Service

    iPhoneで人気のメールクライアント「Sparrow」を使ってみたのでメール設定など色々

    iPhone版のメールクライアント「Sparrow」を使ってみました。…

  3. Web Service

    タスク管理アプリ「Toodledo」が便利なのでそのメリットなどいろいろ

    Toodledoというタスク管理アプリを使ってみました。iPhoneア…

  4. Hex Preview

    Web Service

    カラーコード(HEX値)を入力して色のプレビューを確認できる「Hex Preview」

    Hex Previewという便利なサービスを発見したのでメモがてらご紹…

  5. CSS Gradient Animator

    Web Service

    CSSでグラデーション背景を変化させるコード作成ジェネレーター「CSS Gradient Anima…

    CSSで変化するグラデーション背景を作成したい時に役立つジェネレーター…

  6. Screen Capture (by Google)

コメント

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP