|
Webデザイン 表現&技法の 新・スタンダード
|
|
|
|
|
Lesson02 |
|
|
CSSのみで実装するシンプルなロールオーバー(2) CSSスプライト |
|
CSSスプライトにもいろいろなバリエーションがあるが、ここでは背景に画像を指定せず画像をHTMLのソース上に置き、CSSのmarginによって表示位置を調整する方法を紹介する。 |
01
まずは必要な要素をXHTML でマークアップする【1-1】。liの中にaを配置し、 その中に表示したい画像を指定する。画像のサイズを指定する場合は原寸大を指定する。また、ボタン画像のサイズが違う場合には個別のクラスを指定しておき、あとでCSSでサイズ対応できるように備えておく。
【1-1】
02
CSSでliにはoverflow:hiddenを指定し、liの範囲外にはみ出している要素が表示されないように調整する【2-1】。
【2-1】赤枠がliの範囲。overflow:hidden;を指定したことによって範囲外の部分は表示されなくなる
03
liに指定した個別のclass名のプロパティにはサイズ、liのimgにはマイナスマージンで前のliのimgの幅を指定し、画像の表示箇所を変更する【3-1】。aのブロック化も忘れずに【3-2】 。
【3-1】【3-2】前ページで説明したaにdisplay:block;の指定も忘れないように。a:hoverは上記の指定で対応できる
04
この方法を使えば「altが付けられない」というデメリットをクリアできる。また、背景に画像を指定していないので、印刷するときに画像が表示される【4-1】【4-2】。IE6ではa:hoverが動かないので、CSSのIE6用ハックを使ってhasLayoutをtrueにすること。
【4-1】印刷プレビュー画面【4-2】「ページ設定」で「背景の色とイメージを印刷する」をチェックした状態の印刷プレビュー画面