Lesson 02 CSSのみで実装するシンプルなロールオーバー(2)　CSSスプライト - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson02

CSSのみで実装するシンプルなロールオーバー(2) CSSスプライト

制作・文

宮﨑優子（ビーズスタジオ）

CSSスプライトにもいろいろなバリエーションがあるが、ここでは背景に画像を指定せず画像をHTMLのソース上に置き、CSSのmarginによって表示位置を調整する方法を紹介する。

まずは必要な要素をXHTML でマークアップする【1-1】。liの中にaを配置し、 その中に表示したい画像を指定する。画像のサイズを指定する場合は原寸大を指定する。また、ボタン画像のサイズが違う場合には個別のクラスを指定しておき、あとでCSSでサイズ対応できるように備えておく。


【1-1】

CSSでliにはoverflow:hiddenを指定し、liの範囲外にはみ出している要素が表示されないように調整する【2-1】。


【2-1】赤枠がliの範囲。overflow:hidden;を指定したことによって範囲外の部分は表示されなくなる

liに指定した個別のclass名のプロパティにはサイズ、liのimgにはマイナスマージンで前のliのimgの幅を指定し、画像の表示箇所を変更する【3-1】。aのブロック化も忘れずに【3-2】 。


【3-1】


【3-2】前ページで説明したaにdisplay:block;の指定も忘れないように。a:hoverは上記の指定で対応できる

この方法を使えば「altが付けられない」というデメリットをクリアできる。また、背景に画像を指定していないので、印刷するときに画像が表示される【4-1】【4-2】。IE6ではa:hoverが動かないので、CSSのIE6用ハックを使ってhasLayoutをtrueにすること。


【4-1】印刷プレビュー画面


【4-2】「ページ設定」で「背景の色とイメージを印刷する」をチェックした状態の印刷プレビュー画面