横並びのナビゲーションの基本的なら作り方

Webサイトにおいて、横並びのナビゲーションは必要不可欠だと思うので、まずはその基本的作り方についての解説をさせてもらおうと思います。

今回は基本的な作り方なので、画像など使わずにCSSのみを使ってのナビゲーションにしようと思います。

Domo Page

…ここからが続き

横並びのナビゲーション実践編

XHTML

<ul class="navi">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">link</a></li>
<li><a href="#">contact</a></li>
</ul>

CSS

まずデフォルトで設定されているul要素、li要素を何も設定されていない状態にします。

ul,li	{
	margin:0;
	padding:0;
	list-style: none;
}

全体の横幅を決める

.navi	{
	width: 500px;
}

float: left;でli要素を横並びにし、text-align: center;でテキストをセンターに持ってくる。
font-weight: bold;は太文字にしているだけで、border要素はちょっとしたデザインで入れてるだけです。

.navi li	{
	float: left;
	text-align: center;
	font-weight: bold;
	border-right: solid 1px #000;
	border-left: solid 1px #FFF;
}

display: block;でインライ要素の「a」タグをブロックレベル要素に変える。この時にwidthで横幅を指定するのを忘れないようにしましょう。後は、背景や文字の色を指定しているだけです。

.navi li a	{
	display: block;
	width: 100px;
	padding: 5px 10px;
	background: #F90;
	text-decoration: none;
	border-bottom: solid 1px #000;
	color: #FFF;
}

ここでホバーした時のデザインを指定。

.navi li a:hover	{
	background: #FFF;
	padding: 5px 10px;
	text-decoration: none;
	border-top: solid 1px #F90;
	border-bottom: solid 1px #FFF;
	color: #F90;
}

こんな感じで横並びのナビゲーションもけっこう簡単に出来ちゃいます。
※float: left;をかけたままの状態なので、次の要素でclear: both;をかけるかul.naviにclearfixを指定する事を忘れずに。

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article