第９回勉強会

日　時：
2013年2月13日　13:30〜15:30
場　所：
アワーズ　研修室
出席者：
小野、福田、北條、二神、河野（敬称略）

ナビゲーションの作成

パソボラHP講習会第9日目でお勉強したレイアウトのうちナビゲーションの作り方について、CSSそれぞの指定の意味を検証しながら復習した。

  1. ユニバーサルセレクタで各要素にデフォルトで設定されているマージンとパディングを0に設定する。「*{padding : 0px;margin : 0px;} 」と書きます。
  2. レイアウトコンテナー(div)を挿入しid名をnaviとします、
  3. この中に番号なしリスト(ul)を挿入しリスト項目(li)に「メニュー１」と入力し、ダミーのリンク先(#)にリンクを張ります。
  4. 同様にしてliに 「メニュー２」から 「メニュー４」を追加します。
  5. #naviについて幅600px、上と左パディングをそれぞれ10pxと50pxに設定し「overflow : hidden;」又は「 float : left;」及び背景色を指定します。
  6. ulについて「list-style-type : none;」でリストマーク無しにします。
  7. liについて幅を100pxに、文字列を中央揃えに、「float : left;」で横並びに、背景色を白に、「margin-right : 5px;」でリスと項目の間隔を指定します。
  8. ul li aについて「text-decoration : none;」で下線を消し、「display : block;」を設定します。
  9. ul li a:hoverでマウスがのったときの背景色を設定します。

HTML

<div id="navi">
<ul>
<li><a href="#">メニュー1</a>
<li><a href="#">メニュー2</a>
<li><a href="#">メニュー3</a>
<li><a href="#">メニュー4</a>
</ul>
</div>

CSS

*{
padding : 0px;
margin : 0px;
}
#navi{
padding-top : 10px;
padding-left : 50px;
width : 600px;
overflow : hidden;
background-color : orange;
}
#navi ul{
list-style-type : none;
}
#navi ul li{
background-color : white;
text-align : center;
margin-right : 5px;
width : 100px;
float : left;
}
#navi ul li a{
text-decoration : none;
display : block;
}
#navi ul li a:hover{
background-color : aqua;
}

作成例