HTMLコーディングのノウハウ | 低価格・高品質・最速のHTMLコーディング：クロノドライブ

ロールオーバーの指定の仕方はこれまで何度かご紹介しましたが、今回はそのロールオーバーの指定の中でも、CSSスプライトと呼ばれる方法をご紹介したいと思います。

CSSスプライトとは？

CSSスプライトとは、複数の画像をひとつにまとめ、CSSのスタイルでポジションを指定して表示させることで、画像の読み込みを減らし、サイトの表示をより速くするテクニックです。

このテクニックを使うメリットとデメリットとして...
◆メリット
・複数の画像を一つにまとめることで、サイトの読み込み回数が減り、表示速度が上がる。また、サーバへの接続回数も減るため、サーバに対しての負荷軽減となる。
・例として、ロールオーバーに対して使えば、画像のちらつきなくロールオーバー効果を表現できる

◆デメリット
・複数の画像を一つにまとめるので、例えば特定のバナーのみを変更したい場合でも一々画像とスタイルを編集しなおさなければならないため、手間がかかる
・画像を表示させるために使うと、alt属性が付けられない

以上が挙げられます。
また、注意すべき点として、「高さが変わる要素に対しては使いにくい」という点が挙げられます。（こちらについては後日解説します）

実装するためには

CSSスプライトを使ったロールオーバーを実装するためには、まず以下のような画像を用意します。

上記のように、ロールオーバー前と後のバナーがひとつなぎになっています。
このように、部品ごとに画像を分ける方法と、全ての画像を一枚の画像にまとめてしまう方法があります。

次に、HTML、およびCSSで以下のようにコーディングを行います。

HTML

CSS

上記のように、a要素に対してdisplay:block;とwidth、heightをそれぞれ指定することで、リンクの範囲を指定します。そして、前述のひとつなぎの画像を背景として指定し、デフォルトではtop指定、ホバーしたときにbottom指定など、表示する範囲をbackground-positionで指定します。（上記の例ではbackgroundのショートハンドで指定しています）
また、中のテキストはtext-indent: -9999px;を指定することで、テキストを画面外に飛ばし、非表示にしています。

画像が多くてサイトの表示が重い、という方は、お試しください。