[CSS]画像１枚でメニューボタンを作る

tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を１枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。

完成すると上のようなメニューになるとする。
この場合、a:linkとa:hoverを１枚にまとめて作成します。
横メニューなら上下、縦メニューなら左右に並べて作る。

HTMLは次のようなソースになる。

<ul id="navigation">
	<li><a href="#" title="トピックス" class="topics">トピックス</a></li>
	<li><a href="#" title="経営方針" class="policy">経営方針</a></li>
	<li><a href="#" title="会社概要" class="outline">会社概要</a></li>
	<li><a href="#" title="事業内容" class="activities">事業内容</a></li>
	<li><a href="#" title="営業拠点" class="base">営業拠点</a></li>
</ul>

aタグかliタグに各ボタンを判別するためのclassが必要です。
セレクタが少ないaタグにつけるのが妥当と思うがお好みで。

CSS
まずはボタン以外と共通部分。

ul#navigation {
	width:920px;
	margin:0;
	overflow:hidden;　/*float解除*/
	zoom:100%;　/*float解除*/
}
ul#navigation li {
	float:left; /*次の要素を右側へ回り込ませる*/
	list-style:none; /*リストの●を消す*/
}
ul#navigation li a {
	display:block; /*インラインからブロック要素へ変更*/
	height:37px; /*高さ*/
	width:180px; /*横幅*/
	text-align:center; /*テキストの位置*/
	font-weight:bold; /*テキストの太さ*/
	letter-spacing:1px; /*文字間隔*/
	text-indent:-9898px; /*テキストを横に飛ばして見えなくする*/
	background-image:url(../images/menu.png); /*メニュー画像*/
	background-repeat:no-repeat; /*画像の繰り返しをオフに*/
}

CSSでメニューボタン作る時のセオリー通りに書けばおｋ。

以下はボタンのソース

ul#navigation a.topics {background-position:0px 0px;width:190px;}
ul#navigation li a.topics:hover {background-position:0 -37px;}

ul#navigation a.policy {background-position:-190px 0px;}
ul#navigation li a.policy:hover {background-position:-190px -37px;}

ul#navigation li a.outline {background-position:-370px 0px;}
ul#navigation li a.outline:hover {background-position:-370px -37px;}

ul#navigation li a.activities {background-position:-550px 0px;}
ul#navigation li a.activities:hover {background-position:-550px -37px;}

ul#navigation li a.base {background-position:-730px 0px;}
ul#navigation li a.base:hover {background-position:-730px -37px;}

画像に合わせてbackground-positionで位置指定する。
指定の仕方はbackground-position : 横　縦 ;です。
数値で指定した場合は　横→左から、縦→上から　の位置になります。