サイト内検索:

CSSスプライト使用時の背景位置座標を摘出してくれるサイト「Sprite Cow」

これはすごい。すごいけど、すごいと思うのはCSSスプライトを利用している人だけ、というのが悲しいですがw

CSSスプライトというのはWebページで表示する小さな画像、例えば16x16のアイコンイメージみたいなものを1つの画像にまとめてCSSでその表示位置を変えることでページの表示速度を稼ぐ、というテクニックなんですが、まあ知らなくても普通の生活をする上でなんの問題もないんで、気にしないでください。

で、CSSスプライトは便利なんだけど、それぞれの画像の位置座標を調べるのが結構面倒だったりするわけで。ええ、全部16x16だったら問題ないんですけど、いろいろなサイズの画像があるとほんとに面倒です。

で、そんな面倒くささを解決してくれるのが「Sprite Cow」です。

使い方は簡単でCSSスプライト用画像をアップロードし、それぞれの画像をクリックするだけです。するとその画像の位置が表示されるのでコピペして利用することになります。

試しにトップページにアクセスして「Load Example」というボタンをクリックしてみましょう。上に掲載したスクリーンショットのような画面が表示されます。

この画像内には上の方に各種ブラウザのアイコンが、そして下の方には小さな画像が掲載されていますが、この画像のどれかをマウスでクリックします。するとそのCSS指定がその場に表示されます。

ぱっと見た時はレクトアングルで画像を囲ってあげないといけないのかな、と思ったんですが、そんなことする必要もないというのが実にすごいです。

CSSスプライトを使う機会が増えそうだ。

Sprite Cow - Generate CSS for sprite sheets

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2011年6月22日 19:07に書いたブログ記事です。

ひとつ前のブログ記事は「Firefox 5リリースを祝してまたしてもマイクロソフトからMozillaにケーキが送られる」です。

次のブログ記事は「祝・加藤ローサご結婚」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。