web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

インタラクション＆エフェクト 3-12
CSSスプライトを使ったロールオーバー

CSSスプライトとは複数の画像を1つのファイルにまとめて、CSSのポジション指定で画像の一部を表示させる方法だ。ここでは、CSSスプライトを用いてロールオーバーを実現する方法を紹介する。

制作・文／小川和真（ビヨンド・パースペクティブ・ソリューションズ株式会社）

BROWSER IE…7over　Firefox…3.5over　Safari…4over　Chrome…3over

01

CSSスプライトとは複数の画像を1つのファイルにまとめ、CSSのbackgroundimageとbackground-positionを利用して画像の一部を表示させる方法のことだ【1-1】【1-2】。

画像を一つにすることで、サーバーへのHTTPリクエスト数を減らすことができるため、ページ表示の高速化が期待できるようになる。


【1-1】複数のアイコン画像を一つのファイルにまとめる。


【1-2】CSSスプライトで一部を表示させる。

02

まずはbackground-positionのプロパティを指定する。

方法としては、位置を表すキーワード（top,left,center,right,bottom）で指定する方法、%値で指定する方法、数値で指定する方法がある。

background-positionで値指定をする場合は、背景画像の表示させたい左上の位置を指定する点に気をつける。

【2-1】【2-2】にbackground-positionの値指定したときの表示位置について示した。赤枠の部分がページに表示される領域である。


【2-1】background-position(0,0)の指定。画像の左上が(0,0)になる。


【2-2】background-position(-20px,-25px)の指定。表示したい場所の始点を指定する。

03

CSSスプライトでロールオーバーを実現する手順は【3-1】の通りになる。

では実際に作成してみよう。

マウスオンしたとき、画像名に_offがついていれば_onに画像のパスを変更している。

まずは複数の画像をまとめた画像ファイルを用意する。今回はグローバルナビゲーションとして使用することを想定して作成した【3-2】。

配置はマウスオンした時に表示するロールオーバー前の画像を上に置き、マウスアウト時に表示するロールオーバー後の画像を下に置いている。


【3-1】CSS スプライト作成の手順。


【3-2】ロールオーバーで表示させるグローバルナビゲーションの画像。上がロールオーバー前（マウスオフ）、下がロールオーバー後（マウスオン）。

04

次にHTML を記述する。

【4-1】は、aタグをブロック要素として扱い、そこに背景画像を指定してロールオーバーを行うことを想定して記述している。マウスオンしたときにaタグの背景画像のbackground-positionを変更するためにクラス名を追加している。


【4-1】HTMLの記述例。

05

続いてCSSを記述する【5-1】。

aタグ内のテキストは画面内に表示させないようにtext-indentをマイナスの大きな値を指定することで、画面外になるようにしている。

マウスオンしたときの処理はCSSの:hover疑似クラスを利用し、background-positionを変更するようにしている【5-2】。


【5-1】CSSの記述例。


【5-2】表示例。上がマウスオン時、下がマウスアウト時。

06

CSSスプライトを使用すれば、HTTPリクエスト数を減らすことができるので高速化 が図れる。画像が多いページの場合はより効果が高いだろう。また、JavaScript が無効になっている場合でも動作するという利点がある【6-1】。

一方で、背景画像のposition指定をするためにCSSの記述量が多くなってしまうという問題がある。さらに、ロールオーバーを行うタグにクラス名またはIDをつける必要があるため、HTML内にクラスやIDも多くなる。その結果、CSSが複雑化してしまい、修正等が発生した場合には手間がかかるなどの欠点がある。

ロールオーバーにはJavaScriptを利用する方法もあるが、どちらにも、利点と欠点があるので、状況に応じて使い分けるよ うにするといいだろう。




【6-1】JavaScript が無効になってもきちんと表示される。


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。