リストを横並びにする

  1. 横並びのリストはdiv id="navigation"としてdivで囲みます。
  2. div id="navigation"にボックスの幅を指定します。
    コンテンツ全体を囲む枠の#containerの横幅は、920px
    ここから#navigationの横幅を算出します。
    横幅920px-20px-20px=880px
    この状態では左に寄っているので、左側のmarginを20pxとします。
  3. ul要素のlist-styleプロパティでマーカーを消します。
  4. li要素のボックスの幅を指定し、floatプロパティで横並びにします。（リストを左から順に回り込ませる。）
    ※floatプロパティを指定したli要素には、同時にボックスの幅も指定しておく必要があります。
    （Mac IE5では、li要素のボックスの幅が広がり横並びにできないという事例があるため）

リンク領域を拡大し、アレンジしていく

  1. a要素をブロックレベル要素として表示させます。（display:block）
  2. 旧ブラウザ対策として横幅を100％と指定しておくとよいでしょう。
  3. 上下方向のpaddingを指定することでテキストの位置を調整。
  4. 文字色や背景色のスタイルを追加していきます。
  5. リンクの下線を消し、テキストを中央ぞろえにします。
  6. ul要素にはボックスの高さを指定し、overflowプロパティの値をhiddenにします。
    ※フォントサイズが拡大された場合に、ナビゲーションのレイアウトが大きく崩れてしまうのを防ぐための指定。

オンマウス時のスタイルを指定する

  1. マウスを重ねることで変化する仕組みを取り入れていきます。