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

CSSのテクニックに中でも最も使用されている一つ、CSSスプライトの利点と潜在的な問題点、そしてその解決方法を紹介します。

デモのキャプチャ

Transparent CSS Sprites
デモ

[ad#ad-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;
}

おわりに

このテクニックは、ウェブサイトに多彩なテーマを使用する時に、特に有用となります。ボタンやアイコンなどテーマにあった背景のカラーを簡単に設定することができます。
また、クライアントからのフィードバックでカラーを簡単に変更することも可能です。

そして、このテクニックの一番の利点は、HTTPのリクエスト数を減らすということです。そして画像自体にカラーを使用していないため、カラーを処理するブラウザのメモリ使用量も減らします。

ただし、一つ注意点があります、IE6では透過PNGをサポートしていません。対処方法としては透過GIFを使うことで、とりあえずの効果は得られます。
IE PNG Fixを使用することも一つの手ですが、これはJavaScriptを使用することになってしまいます。

sponsors

top of page

©2018 coliss