［CSS］縦のナビゲーション（3月6日）

ナビゲーションをlist で作る

<ul>で作るメリット　＝　順番を入れ替えても成立する

◆記述例

<ul>

<li class="nav01"><a href="#">ホーム</a></li>

<li class="nav02"><a href="#">サービス</a></li>

<li class="nav03"><a href="#">セミナー</a></li>

<li class="nav04"><a href="#">会社について</a></li>

</ul>

　　１．リスト<li>にidをふる方法（上の例、一般的）

　　２．アンカー<a>にdをふる方法　→　スタイルシートが複雑になる

例①

メニュー間の空きはmargin-bottomで調整する

例②

• li　に指定する要素＝　主に文字に関するもの
  　　font-size、font-weight
• li a に指定する要素＝　aの領域に関するもの　
  　　display: block、border、文字色、背景、padding

＜CSS記述＞

ul#nav1 {
    width: 150px;
    border: 1px solid #DCD3B2;
    border-bottom: none;　　←ボーダーをとりあえず全部設定し、bottomだけ解除するやり方
}
#nav1 li {
    font-size: 16px;
    line-height: 30px;　　←メニューの高さ。文字の中心を真ん中に上下30pxの間隔になる
}
#nav1 li a{
    display: block;　　←メニューを面として捉え。ボタンとして機能するのに必須
    color: #A52345;
    background: #F3B3C3;
    border-bottom: 1px solid #DCD3B2;　ボーダーbottomをここに指定
    padding-left: 10px;
}
#nav1 a:hover {
    background: #DCD3B2;
}

 擬似クラス

　a:link  　　未訪問リンク
　a:visited　訪問済みリンク
　a:hover　要素にカーソルがある状態　
　a:active　要素がアクティブな状態（クリックした瞬間）

CSSで記述するときは上から順番に。順不同ではないので注意。

上のナビゲーション例②ではli a とli a:hover しかないのは、
li a にa:link、a:visited、a:activeの３つを集約しているため。