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

・
 

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

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



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

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

メニューバー完成参考画

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

フロートの解除についての詳細
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 ピクセル
レイアウト バッティング 4方向 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】が、5つで、幅を80ピクセルに指定。
なので、5項目×80px=【ul】は400ピクセルになります。
項目の幅や数が変われば、【ul】に指定する値は、変わってきます。

 


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

 
 

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Post Navigation