[CSS]CSSスプライトの利点と潜在的な問題点、そして解決方法

Post on:2010年11月2日

はじめに

最近のフロントエンドの開発に必要不可欠なテクニックの一つにCSSスプライトがあります。このテクニックはA List Apartの記事「CSS Sprites」によって普及されたものです。
CSSスプライトは一度理解したら本当にシンプルなテクニックで、あらゆる方法に応用することができます。一般的に利用されるのはナビゲーションで、他にもボタンや見出しにも使用されています。

スプライトは複数のイメージを一つのファイルにマージして使用します。各イメージは、CSSのbackground-potitionでポジションを指定して表示します。

このCSSスプライトはここ二年に渡り、最も広く採用されたCSSのテクニックといっても過言ではないでしょう。Yahoo!をはじめ、GoogleやAmazonなどでも、ウェブサイトの表示を早くするために利用されているテクニックです。

CSSスプライトの利点と潜在的な問題点

CSSスプライトはあなたのウェブサイトのスピードを改善するテクニックです。一つのファイルに多数のイメージをマージすることで、多くのサイトでHTTPリクエストの数を減らすことができます。たいていのブラウザは一つのドメインに対して二つの同時接続を行い、個別のファイルは大きくなりますが全体的なリクエストとレスポンスはかなり改善されます。

ファイルサイズやHTTPのリクエストといったCSSスプライトの利点はよく語られていますが、潜在的な問題点についてはあまり議論されていません。技術的な問題の一つとして「To Sprite Or Not To Sprite」で説明されているブラウザのメモリに関するものがあります。また、マージしたファイルのメンテナンスも手間がかかるものになります。

CSSスプライトの潜在的な問題の解決方法

ファイルサイズの肥大化やスピードに関しては、ユーザーの利用しているPC、インターネットの回線などハードウェアが向上することで解決すると考えるかもしれません。レイアウトが複雑になるにつれ、より多くのファイルが必要とされ、制作者はそれがスプライトであるにしても、より多くのイメージを使用するようになります。これは合理的な主張のように思われますが、決してよい解決方法ではないでしょう。

ここではシンプルで、しかも極めて効果的な方法を紹介します。
スプライトに使用する画像は背景カラーが完全に見えるように透明なものにすることです。そしてそのイメージはbackground-colorの上に配置されます。これにより、簡単に背景の色を変更することができます。注意を払う唯一のことは透明な部分の境界を背景と同じものにすることだけです。

解決方法のデモ

デモで使用しているのは、滴、フォント、ボタン、の3つのイメージから構成されています。滴とボタンはホバーでイメージが変更され、滴をクリックすると全てのイメージのカラーが変更されます。

デモ

デモで使用しているイメージ

フォント: フォントのイメージはホワイトの背景で透明な箇所を含むため、ホワイトの背景では表示されません。
使用している画像：transparent-sprite-fonts.png
滴: 滴のイメージは2つの異なる背景があり、グラデーションを使用しています。
使用している画像：transparent-sprite-drops.png
ボタン: ボタンのイメージはスタティック、ホバー/フォーカス、の2つのイメージを用意し、背景のカラーを変更するだけでさまざまなカラーを適用できます。ボタンのラベルはデバイステキストを使用しています。
使用している画像：transparent-sprite-button.png

ボタンで使用しているテクニックはこの中でも最も使い勝手がよく、フレキシブルな方法です。たとえば、次のようにそれぞれ異なるカラーを使用したボタンを一つのファイルだけで表示できます。

CSS

CSSで異なるカラーを指定するのは、下記のようになります。

a.button {
  display: block;
  width: 80px; height: 30px;
  margin: 0 20px;
  font-size: 14px; line-height: 30px; color: #fff;
  text-align: center; text-decoration: none;
  background: #4a4a4a url(button.png) no-repeat 0 0;
}
a.button:hover,
a.button:focus,
a.button:active {
  background-position: 0 -40px;
}
a.button.warning {
  background-color: #ea1d22;
}
a.button.go {
  background-color: #309721;
}