グローバルナビの作り方（ブロック版）

グローバルナビの作り方（ブロック版）

グローバルナビをブロック要素の組み合わせで作る方法は、インライン要素で作成する場合に比べ、設定がやや複雑になります。

HTMLの書き方

<ul id="gNavi">
	<li><a href="#">トップページ</a></li>
	<li><a href="#">プロフィール</a></li>
	<li><a href="#">当サイトについて</a></li>
	<li><a href="#">リンク集</a></li>
	<li><a href="#">お問い合わせ</a></li>
</ul>

HTMLはインライン版と全く同じですが、グローバルナビの両サイドに余白を設けたり、罫線を引いたりする場合は、ulタグの前にdivタグで親ボックスを設け、そこにセレクタをつけた方が崩れを防止できます。

各ブロックの幅の計算

各メニューをインラインで表示させる場合は特に必要ありませんでしたが、各メニューを均等の幅で表示させるためには、それぞれの幅の計算が必要になります。

例えば、490pxの範囲内で5つのメニューを表示させる場合（以下、この例に沿って解説します。）、「490÷5＝各98px」の幅を持たせればOKです。ただし、余白を設けたり罫線を引いたりする場合は、それを加味して各メニューの幅を決定するようにしましょう。

CSSの書き方

第1段階 - ulタグにサイズ・背景等を指定

まずは、メニューの外枠となるulタグに、サイズ、背景、表示方法等の指定を行います。

#gNavi {
	margin:10px 0;
	padding:0;
	width:490px;
	height:30px;
	overflow:hidden;
	background:#009;
}

グローバルナビの外枠となるulタグに、width（横幅）、height（高さ）を指定し、さらにoverflowプロパティで指定した幅・高さをはみ出した部分の表示方法を「hidden（非表示）」に指定します。この非表示の指定が、崩れを防ぐ上で重要になってきます。

第2段階 - リストマークの非表示とfloatの指定

次に、各メニューを表すliタグのリストマークを非表示にし、幅を指定して、liタグを左寄せにしていきます。

#gNavi {
	margin:10px 0;
	padding:0;
	width:490px;
	height:30px;
	overflow:hidden;
	background:#009;
}
#gNavi li { list-style:none; width:98px; float:left; }

id＝gNavi内の全てのliタグに指定が適用されるようセレクタを「#gNavi li」とし、widthで幅を「98px」に指定、floatプロパティで左寄せにします。

floatプロパティを使用してボックス要素を片側に寄せた際、通常はclearプロパティによる回り込み解除の指定が必要になりますが、ここでは、親ボックスであるulタグに高さを指定し、さらにサイズを超えた部分を非表示にしていますので、clear指定なしで崩れを防ぐことができます。

最終段階 - aタグをブロック要素にしデザインを整える

最後に、aタグをブロック要素に変換し、その他のデザインを整えて完成です。

#gNavi {
	margin:10px 0;
	padding:0;
	width:490px;
	height:30px;
	overflow:hidden;
	background:#009;
}
#gNavi li { list-style:none; width:98px; float:left; }
#gNavi li a {
	display:block;
	line-height:30px;
	color:#fff;
	text-align:center;
}
#gNavi li a:hover { background:#66c; }

インライン要素をブロック要素として表示させるためにはdisplayプロパティを利用しますが、ブロック要素にする理由は、liタグ内で余白なしで背景色をつけるため。インライン要素に背景色を指定した場合は上下に余白ができてしまいますが、ブロック要素として表示させ、line-heightプロパティで1行の高さをグローバルナビの高さと同じに指定することで、ピッタリとくっつけて表示させることができます。

その他、マウスカーソルがリンク部分に乗ったときに背景色を変更する指定も行っています。

応用 - 背景に画像を指定する

上記の例では背景色を指定してグローバルナビをデザインしましたが、次のように背景に画像を使用することもできます。

#gNavi {
	margin:10px 0;
	padding:0;
	width:490px;
	height:30px;
	overflow:hidden;
	background:#009 url('bgOFF.gif');
}
#gNavi li { list-style:none; width:98px; float:left; }
#gNavi li a {
	display:block;
	line-height:30px;
	color:#fff;
	text-align:center;
}
#gNavi li a:hover { background:#66c url('bgON.gif'); }

通常用とマウスを乗せたとき用、2種類の画像を用意し、backgroundプロパティで背景画像に指定すると、上のようにちょっと凝った感じのグローバルナビを作ることもできます。

ただし、画像によっては微妙な位置の調整が必要になる場合があります。その際は、background-positionプロパティを利用して位置を調整してください。（上のサンプルでは、マウスを乗せた際の斜め線が元の線と合っていません。このような場合、背景画像の位置調整が必要になります。）