昨日の続きで、CSSをもちいてWebページのレイアウトを整備していきます。
資料はこちら → CSSその5
p.1 今まで、ナビゲーションリストは文字にアンダーラインがあり縦方向のリスト形式になっていました。先ずは横に並べます。CSSファイルに書き込む順番は、リスト（ul）、リスト項目（li）そして要素(a)の順番です。右下の図を見てください。リスト全体の幅が940px、ﾊﾟｯﾃﾞｨﾝｸﾞ０で左端が基準です。 次にリスト項目の幅を155px、右隣とのマージンが2pxなので、157px間隔で指定します。最後の項目は右にマージンが無いので、margin-rightは０です。
p.2 リスト項目をボタンに変更します。デフォルトは下線なのでNoneで消去します。背景を茶色、文字を白にして大きさを調整します。
p.3 ボタンの上にカーソルを載せると色が変わる設定法です。カーソル載せた時が:hover、クリックした時が:activeです。後の方が有効なので、hoverが先でactiveが後に記載します。
HTMLとCSSをリンクさせることにより、Webページが出来上がることが理解できましたでしょうか。まだまだデザイン・レイアウトに関しては技があるようです。興味お持ちの方は、勉強してみてください。