リストでマークアップした横メニュー|Web制作の基本:StudyNet

HOME > CSS カスタマイズ > リストでマークアップした横メニュー

リストでマークアップした横メニュー

CSSのみでデザインする方法です。
フッターナビゲーションにも使えますし、
背景画像を使用したデザイン性に優れたナビゲーションでの作成も可能です。

CSS記述例

#main ul.list_design1{

	margin:0;

	padding:0;

}

#main ul.list_design1 li{

	display:inline;

}

#main ul.list_design1 li a{

	display:block;

	width:100px;

	height:26px;

	float:left;

	text-decoration:none;

	text-align:center;

	background:#CCCCCC;

	color:#333;

	padding:4px 0 0 0;

	border:1px solid #666;

}

#main ul.list_design1 li a:hover{

	background:#333;

	color:#fff;

}

タグ記述例

<ul class="list_design1">

<li><a href="http://www.studynet.jp" target="_blank">StudyNet</a></li>

<li><a href="http://ajax.studynet.jp/" target="_blank">Ajax入門</a></li>

<li><a href="http://web.studynet.jp/" target="_blank">Web制作の基本</a></li>

<li><a href="http://php.studynet.jp/" target="_blank">PHP 入門</a></li>

<li><a href="http://it.studynet.jp/" target="_blank">IT 用語辞典</a></li>

</ul>