フロートを使った横並びのメニューバー　中央配置

今回は、フロートを使った横並びのメニューバーを作成します。

やっと、だね……(-.-)

リストタグをフロートで横並びにし、中央配置のメニューバーをつくる

今回作るのは、まずは、こちら↓↓↓です。サンプルページはこちらから。

今回使う設定の詳細については、下記のページをご覧ください。

フロートの解除についての詳細

flot（フロート）の解除は、やっかいだ！

リストタグについての詳細

リストタグの余白やリストマークについて

以上をふまえ、作成していきます。

構造・HTML

作成する項目定は、下記の通り

1. 外枠【div】　横幅800ピクセルで中央配置
2. メニュー枠【div】　リストタグで作ったメニューを入れるボックス
3. リストタグ【ul】横幅を設定しセンター配置
4. リストタグ項目【li】フロートで横並び
5. リンク設定【a】装飾はここで行う
6. リンク設定【a:hover】マウスポインターがのった時の表示

<div id="wrap">
  <div id="menu">
    <ul>
        <li><a href="a">Index</a></li>
        <li><a href="a">Gallery</a></li>
        <li><a href="a">Blog</a></li>
        <li><a href="a">Link</a></li>
        <li><a href="a">About</a></li>
    </ul>
  </div>
</div>

CSSとそのポイント

• フロートさせた【li】を解除するには、【ul】に【overflow : hidden;】を指定。
• メニュー項目の中央配置は、【ul】の左右のマージンに【auto（自動）】を設定。また、【margin : auto;】を指定する為【ul】には横幅を設定する。
• リストタグの余白のリセット及び、リストマークに非表示の設定。

ビルダーの設定は下記の通り

タブ	項目		数値など
IDのスタイル　　ID名：#wrap
レイアウト	マージン	左方向・右方向	自動
位置	配置	幅	800	ピクセル
IDのスタイル　　ID名：#menu
色と背景	背景色	#009999
HTMLのスタイル　　HTML名：.ul
レイアウト	マージン	左方向・右方向	自動
リスト	リストマークのタイプ
位置	配置	幅	400	ピクセル
	属性	はみ出した場合の処置	不可視
HTMLのスタイル　　HTML名：.li
フォント	文字の属性		太い
文字のレイアウト	水平方向の位置		真ん中
位置	配置	幅	80	ピクセル
	属性	回り込み	左
HTMLのスタイル　　HTML名：a
フォント	文字飾り		なし
色と背景	前景色		#ffffff
	背景色		#009999
レイアウト	バッティング	上方向	4	ピクセル
		下方向	2	ピクセル
位置	属性	表示	BLOCK
HTMLのスタイル　　HTML名：a:hover
色と背景	背景色		#00caca
HTMLのスタイル　　HTML名：.ul　　CSSリセットをしていない場合加える設定
レイアウト	マージン	上方向・下方向	0	ピクセル
レイアウト	バッティング	４方向	0	ピクセル

#wrap{
   
  margin-left : auto;
  margin-right : auto;
  width : 800px;
}

#menu{       
  background-color : #009999;
}

ul{    
  margin-left : auto;
  margin-right : auto;
  list-style-type : none;     
  width : 400px;
  overflow : hidden;

  /* CSSリセットを行っていない場合設定 */
  margin-top : 0px;
  margin-bottom : 0px;
  padding-top : 0px;
  padding-left : 0px;
  padding-right : 0px;
  padding-bottom : 0px;
}

li{
  font-weight : bold;
  text-align : center;
  width : 80px;
  float : left;
}

a{    
  text-decoration : none;
  color : #ffffff;
  background-color : #009999;
  padding-top : 4px;
  padding-bottom : 2px;
  display : block;
}

a:hover{        
  background-color : aqua;
}

【li】に、【display:inline】を指定するのか……？
いろんなサイトで紹介されている、フロートの横並びメニューを見ると、【li】に【display:inline】のスタイルが記載されていることが多いです。
どうして、指定しているかまで書かれているサイトが、ほとんどないので、いまひとつ私には、理解が出来ない事柄でありますが、どうやら、Internet Explorer6、対策が理由らしいです（？）そして、それが、マージンに対するものとか、行間の問題らしい、と、ぼんやりとした情報を得ています。（←と私が感じているだけかもしれない）
で、こんな状態で、自分は、どうすれば、いいのだろうか？　と、考えまして……メニューバーでは、あまりマージンは使わないだろうと、いうことと、取りあえず、私が自サイトで、この指定をしなくても、「レイアウトが崩れて見えません！」などのご意見を頂戴することもないので、いらないじゃん！　と、私的には思った次第でございます。
そんなわけで、今回、設定はしておりません。意味を理解出来る日がきたら、追記しますね！

注意点　【ul】の横幅設定

サンプルは、リストの項目【li】が、５つで、幅を80ピクセルに指定。
なので、５項目×80px＝【ul】は４００ピクセルになります。
項目の幅や数が変われば、【ul】に指定する値は、変わってきます。

横幅の指定については、次の「フロートを使った、いろいろな横並びメニュー」で
サンプルを交えて書いています。
覘いてみてね！