<li>タグのメニュー化

<li>タグを使ったメニュー化は、CSSが適用されない状況でもメニューとしての体裁が残るため事例としてよく紹介されています。
そんなメニュー化のパターンをいくつかサンプルとして紹介します。

基本タブ

<ul>
<li class="menu" id="current"><a href="#" class="link">MENU1</a></li>
<li class="menu"><a href="#" class="link">MENU2</a></li>
<li class="menu"><a href="#" class="link">MENU3</a></li>
<li class="menu"><a href="#" class="link">MENU4</a></li>
</ul>

<li>タグに対してmenuクラスを、<a>タグに対してlinkクラスを指定します。
current IDについては、メニューの選択状態を表しますので、不要な場合は記述しません。
<a>タグのリンクは任意です。

縦組みメニュー

上からメニューを並べます。

.menu {
	list-style: none;
	width: 100px;
	height: 20px;
	margin: 2px;
	padding: 2px;
	display: block;
	color: #03F;
	font-size: 18px;
	text-align: center;
	border: double 5px #0033FF;
	background-color: #CFC;
}

.link {
	display: block;
	text-decoration: none;
}

#current {
	font-weight: bold;
	background-color: #FCF;
}

コンテンツの左にメニューを表示する場合は、<div>タグをコンテンツ用のエリアに指定し、メニュー全体（<ul>タグまたは<div>タグで指定）を左へ（float: left）寄せて、コンテンツエリアは左に余白を取ります。

CSSの「#current」を「.link:hover」に置き換えるとマウスを載せたときに色が変わるようになります。

フローティングメニューを参考にしてください。

横組みメニュー

左からメニューを並べます。
タブ風に表現されることもあります。

.menu {
	list-style: none;
	width: 100px;
	height: 20px;
	margin: 2px;
	padding: 2px;
	display: block;
	color: #03F;
	font-size: 18px;
	text-align: center;
	border: double 5px #0033FF;
	background-color: #CFC;
	float: left;
}

.link {
	display: block;
	text-decoration: none;
}

#current {
	font-weight: bold;
	background-color: #FCF;
}

縦組みに対して、「float: left;」を入れるだけで左から順に並びます。

タブ風メニュー

タブ風にするには、メニューの下に<div>タグを設置します。

<ul>
<li class="menu" id="current"><a href="#" class="link">MENU1</a></li>
<li class="menu"><a href="#" class="link">MENU2</a></li>
<li class="menu"><a href="#" class="link">MENU3</a></li>
<li class="menu"><a href="#" class="link">MENU4</a></li>
</ul>
<div class="area">表示エリア</div>

.menu {
	list-style: none;
	width: 100px;
	height: 20px;
	margin: 2px 2px 0 2px;
	padding: 2px;
	display: block;
	color: #03F;
	font-size: 18px;
	text-align: center;
	border: double 5px #0033FF;
	border-bottom: none;
	background-color: #CFC;
	float: left;
}

.link {
	display: block;
	text-decoration: none;
}

#current {
	font-weight: bold;
	background-color: #FCF;
}

.area {
	background-color: #FFF;
	border: 5px solid #03F;
	clear: left;
}

<li>タグ（menuクラス）の下にある余白やボーダーを消します。<div>タグ（areaクラス）には「clear: left;」を指定して横並びの終わりとします。

タブを左に寄せる

タブの開始位置を調整して表示しましょう。

<ul class="menuset">

.menuset {
	margin-left: -40px;
}

<ul>タグにmenusetクラスを割り当て、左余白をマイナスに指定します。
<div>タグとの位置合わせは、ボーダーや余白の設定に応じて数値を微調整します。

戻る