画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。
【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）
ロールオーバーの指定の仕方はこれまで何度かご紹介しましたが、今回はそのロールオーバーの指定の中でも、CSSスプライトと呼ばれる方法をご紹介したいと思います。
CSSスプライトとは？
CSSスプライトとは、複数の画像をひとつにまとめ、CSSのスタイルでポジションを指定して表示させることで、画像の読み込みを減らし、サイトの表示をより速くするテクニックです。
このテクニックを使うメリットとデメリットとして…
メリット
- 複数の画像を一つにまとめることで、サイトの読み込み回数が減り、表示速度が上がる。また、サーバへの接続回数も減るため、サーバに対しての負荷軽減となる。
- 例として、ロールオーバーに対して使えば、画像のちらつきなくロールオーバー効果を表現できる
デメリット
- 複数の画像を一つにまとめるので、例えば特定のバナーのみを変更したい場合でも一々画像とスタイルを編集しなおさなければならないため、手間がかかる
- 画像を表示させるために使うと、alt属性が付けられない
以上が挙げられます。
また、注意すべき点として、「高さが変わる要素に対しては使いにくい」という点が挙げられます。（こちらについては後日解説します）
実装するためには
CSSスプライトを使ったロールオーバーを実装するためには、まず以下のような画像を用意します。
上記のように、ロールオーバー前と後のバナーがひとつなぎになっています。
このように、部品ごとに画像を分ける方法と、すべての画像を一枚の画像にまとめてしまう方法があります。
次に、HTML、およびCSSで以下のようにコーディングを行います。
HTML
1 | <a href="test.html" class="sampleBn">お見積もりはこちら</a> |
CSS
01 | .sampleBn { |
02 | width: 200px; |
03 | height: 24px; |
04 | display: block; |
05 | background: url(../img/sample_bn.jpg) no-repeat left top; |
06 | text-indent: -9999px; |
07 | } |
08 | .sampleBn:hover { |
09 | background: url(../img/sample_bn.jpg) no-repeat left bottom; |
10 | } |
上記のように、a要素に対してdisplay:block;とwidth、heightをそれぞれ指定することで、リンクの範囲を指定します。そして、前述のひとつなぎの画像を背景として指定し、デフォルトではtop指定、ホバーしたときにbottom指定など、表示する範囲をbackground-positionで指定します。（上記の例ではbackgroundのショートハンドで指定しています）
また、中のテキストはtext-indent: -9999px;を指定することで、テキストを画面外に飛ばし、非表示にしています。(※text-indet:-9999px=スパムというイメージを持たれる方がいらっしゃいますが、背景画像に書かれている文言と同じテキストをtext-indentで非表示にすることは問題ありません。
ユーザに見えている画像の文字と全く関係のないテキストをtext-indentで非表示にすることはスパムに当たる可能性が強いので行わないようにしましょう。)
画像が多くてサイトの表示が重い、という方は、お試しください。
