今回は今までの学習内容を生かしてナビゲーションバーを作成していきます。ここでは、ページ内でユーザーがサイト内の別ページに移動できるリンクを作成します。今回も気楽に見てください。

ナビゲーションバーのhtml構造！

html構成まとめ！

段階はありますがここで一つにここはまとめます。

index.html;

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML</title>
  </head>
  <body>
    <ul id="nav">
      <li><a href ="#">TOP</a></li>
      <li><a href ="#">ABOUT</a></li>
      <li><a href ="#">NEWS</a></li>
      <li><a href ="#">LINK</a></li>
    </ul>
  </body>
</html>

ID名「nav」の要素の装飾！

行うことと簡単なまとめ

まず、id:navの要素の内側の隙間を0に設定し間隔も0に設定。
リストの項目の点も消す。
内側のli要素がul要素を飛び出さないようにoverflowを使用する。

main.css;

@charset "UTF-8";

# nav {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

id名「nav」要素の直下にあるli要素を装飾！

行うことと簡単なまとめ

バックグラウンドのカラーを変更し、高さを変更！
そして、borderで枠組みを作成。
inlineのものはそれ自身が高さを持たないためheightが適用されないのでblockに変更。
その後、リンク文字を縦の中央揃えにして、横中央揃えにする。
横幅を98pxにして、floatをleftにしてリスト項目を横に並べる！
枠線が重複して今うのでborderの調整で左側の枠を0にする。
一番最初の要素のみに枠線を左側に着ける！

main.css

# nav > li {
  background-color: #900;
  border: 1px solid #300;
  border-left: 0;
  display: block;
  float: left;
  height: 48px;
  line-height: 48px;
  text-align: center;
  width: 98px;
}

# nav > li:first-child{
  border-left: 1px solid #300;
}

割とまとめて書いてしまいましたけど、やってることは今まで書いた記事を見返してもらえれば同じことをしています。

リンク文字を調整

行うことと簡単なまとめ

まず、書き込む場所を準備!
文字の色をcolorを使って調整！
先と同様、displayをblockに変更！
text-decorationを使って下線を削除！

main.css;


# nav > li >u{
  color : #FFF;
　display: block;
　text-decoration: none;
}

ナビゲーションバーに効果を！

準備：li要素にマウスが乗ったとき！

マウスが乗った際にスタイル指定するのは:hoverを使用！
#nav > li:hover{ }

背景色を調整！

#nav > li:hover{ background-color : #C33; }

準備:a要素にマウスが乗ったとき！

#nav > li > a:hover{ }

a要素に下線を！

文字に下線を追加するにはtext-decorationを使用！
#nav > li > a:hover{ text-decoration: underline; }

まとめ！

main.css;

@charset "UTF-8";

# nav {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

# nav > li {
  background-color: #900;
  border: 1px solid #300;
  border-left: 0;
  display: block;
  float: left;
  height: 48px;
  line-height: 48px;
  text-align: center;
  width: 98px;
}

# nav > li >u{
  color : #FFF;
　display: block;
　text-decoration: none;
}

# nav > li:hover{
  background-color: #C33;
}

# nav > li > a:hover{
  text-decoration: underline; 
}

今回はいつも説明してるところをまとめて終わらせてみました。記事を書く時間の短縮と見やすさの向上を目指してみてます。見ずらいなと思ったら書いていこうと思います。