CSS Spriteって結構面倒かも

Web

はてブから知った情報ですが、Webで、いくつもの背景画像を読み込むよりも、1枚の画像にまとめたものを読み込み、表示位置をずらすテクニックがあるそうです。
たしかに背景画像に使うのなんて、たいしたサイズのふぃるではないし、寄せ集めてもたかがしれています。それに、Webサーバへのリクエストが1回で済むのは、サーバにもクライアントにもある程度やさしい。そういう意味で目から鱗のテクニックです。

このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…）

せっかくなので、本日はCSS Spriteをいろいろとまとめてみました。

CSS Spriteを活用しよう – DesignWalker

というわけで、たくさんのサンプルが紹介されています。基本的な使い方から応用して表現力がよりあるものまであります。

サンプルを見た限りだと、CSS上で次のようなことをしています。

  1. background-image プロパティで背景画像を読み込んだ後、
  2. background-position プロパティで表示する位置を調整

なかなか面白いテクニックです。個人的には、結構面倒なテクニックでもあるなぁと思います。まず、位置を調整しやすい1枚モノの画像ファイルを作るのが面倒、また、表示位置を調整するのが面倒。でも、プロ・セミプロのような人からすれば、最初に1枚モノの画像ファイルを作るのは、逆に効率的かもしれません。デザインを見比べならが調整して作れますからね。