くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[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>

  1.リスト<li>にidをふる方法(上の例、一般的)

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

 

例①

f:id:pleasure10501:20150312202124p:plain

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

 

 

例②

f:id:pleasure10501:20150312202119p:plain

  • li に指定する要素= 主に文字に関するもの
      font-size、font-weight
  • li a に指定する要素= aの領域に関するもの 
      display: blockborder、文字色、背景、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の3つを集約しているため。

広告を非表示にする