『TypePadクエスト』第1話：CSS Spriteの衝撃

CSS Spriteの衝撃

・Yahoo!

・Amazon

・Google

　こ、これは…すごい！。アクセス数が飛びぬけているサイトでは、もはや常識のテクニックなんでしょうか。

CSS Spriteとは？

　CSS Spriteとは、ページ内で使う背景画像を1枚の大きな画像ファイルにまとめ、CSSを使って画像の表示位置をコントロールするテクニックのことをいいます。普通の画像を使ったサイトでは、画像1枚につき１HTTPリクエストが発行され、画像の数だけWebサーバに負担が掛かります。しかし「CSS Sprite」を使用すれば、画像1枚分の1HTTPリクエストで済むため、大幅な通信コストの削減になります。

　また、一度取得した画像は、Webブラウザのキャッシュに保存されるため、その後同じ画像が出てきた場合には、Webブラウザのキャッシュから画像が読み込まれます。Webブラウザのキャッシュ画像の利用によって、ますますWebサーバの負担が軽減されます。

CSS Spriteを実生活に置き換える

　何がお得なのか？ 我々にはなかなか実感しにくいので、「CSS Sprite」を実生活に置き換えてみます。だいたい以下のような感じでしょうか。

・太郎君はお母さんに言われて、近所のスーパーにマグロの切り身を買いに行きました。

・太郎君が家に戻ってくると、お母さんは言いました。「醤油があと少ししかないから、醤油を買ってきてね」。

・太郎君は再びスーパーへ行くことになりました。

・太郎君が醤油を買って家に戻ってくると、お母さんは言いました。「わさびがもうないから買ってきてね」。

・太郎君はまたまた、スーパーに行くことになりました。太郎君は思いました。「こんなことなら、冷蔵庫の中を確かめてから、買い物メモを持たせてくれればいいのに。いくら近所とは言え、何回もスーパーに行くのは面倒くさい！たった1つの商品を買うのに、また夕方の混雑したレジに並ぶのか…」。

実装してみる

　さて、「CSS Sprite」の概念は頭で分かっても、実際にやってみないことには真に理解したことにはなりません。まずは身近な例として、エンジニアライフのプロフィール画像を「CSS Sprite」してみます。当コラムのプロフィール画像は「もみじ」ですね。

　実装するにあたり、クロスブラウザの工数は無視できないので、ブラウザのシェア上位1位と2位で動けば良しとします。つまりIEとFireFoxを対象に作ります。

　プロフィール画像をまず4分割し、それを再びくっつけて表示します。4つの画像を新規に作っていない点に注目してください。

　このコードはVisual Studio上で書いたものですが、Visual Studioさんが勝手にXHTMLをフォーマットするので無駄に行数が増えてます。今回は、「CSS Sprite」の分かりやすいサンプルとして「お馬鹿アプリ」に仕上げました。

必殺？斬鉄剣！！

　こんにちは。お昼のニュースです。本日未明、XML乱舞は「CSS Sprite向けお馬鹿アプリ」を発表しました。では、会場のパシフィコ横浜から中継です。

最後に

　今回は「TypePadの自動修正に対抗する」という内容にはまったくなっていませんでした。しかしです。この「CSS Sprite」によって、結果的には「ある扉を開くキー」を手に入れたことになるのでした。TypePad攻略まであと2話……。