フリー素材

４月よりインターネットマガジンでCSSを使ったコネタを幾つか紹介しています。11月号はサイドバーに置けるブログアクセサリーのカスタマイズ方法について書きましたが、そこで画像が幾つか使われています。今回は以前の号でも使った画像をひとつにまとめておきました。サイトに実際使ったり改造したり、ご自由にお使いくださいダウンロードはこちら（ZIPファイル）。

11月号ではMyClip、JUGEPi、Flickr!のカスタマイズ方法を紹介しましたが、いずれもクラス名が細かく指定してあるので、自分のサイトにあわせたデザインに作り直しやすくなっています。今回のコネタをヒントに自分なりにアレンジしてみてはいかがでしょうか。

より速いマウスオーバー処理ver.2

本書の179ページでJavaScriptを使わないでマウスオーバーをする方法を解説しましたが、本書ではテキストの背景に画像を貼付ける方法をとっていました。アクセシビリティやメンテナンスのしやすさを考えるとこういったテクニックは非常に使えるのですが、場合によっては画像の文字を使ってビジュアル的によりおもしろいデザインにしたいときもあります。そういった場合だと本書で紹介したテクニックでは少し物足りないということになります。そこで今回は本書のように＜UL＞でテキストリストを保持しつつ画像を使ったナビゲーションの作り方を紹介します。

SSSB：マウスオーバーデモ

デモではCSSもダウンロード出来るので詳しくはそちらを見てほしいですが、キーポイントになるのは以下の部分になります。

ul#navigation li a {

	height: 26px;

	position: absolute;

	overflow: hidden;

	padding: 26px 0 0 0;

	text-indent: -100em;

	text-decoration: none;

	top: 0;

	width: 130px;

}

今回も本書で紹介したように背景に画像を貼付ける方法がとられていますが、大きな違いは「text-indent」でテキストを可視部分（ここでは130px X 26px = 画像の大きさ）の外に押しやっているところ。あとは、本書のように背景画像をマウスオーバー時に上下にずらしてしまえば完成です。

動作確認はWindows版IE5.5+, Mozilla, Opera7.5, Mac版IE5.2, Safariで行っています。今回はpositionを使ったテクニックを紹介しましたが、他にも方法はあるのでいろいろ試行錯誤してみると良いかもしれませんね。また、今回のテクニックはCSSがONにしてあって、画像を表示させないというケースではナビゲーションが表示されなくなるので、高いアクセシビリティが要求される場合は他の方法を考えるか、テキストで表現したほうが良いと思います。