ナビゲーションボタンの制作 - WEBサイト制作の勉強

ナビゲーションボタンを作る際のポイント

マウスクリック（ホバー）により、次の情報に遷移可能であることを認知させる仕組み
文字以外の領域面ををクリック可能にするためには「display: block」が必須
高さは、「line-height」か「padding」で指定する、

「li」に padding を指定しても「li a」に指定がなければ打ち消したことになるので領域が広がりません。

borderを指定する際は「幅の指定はli」borderの指定は「li a」にする

縦並びのナビゲーション

例

f:id:yachin29:20160314023433j:plain

<body>
<ul>
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
</ul>
</body>

記述例

/* reset */
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*レイアウト*/
ul {
  width: 200px;
}
li {
  width: 200px;
  height: 50px;
  text-align: center;
}
ul li#new a {
  display: block;
  background-color: #FE0000;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#info a {
  display: block;
  background-color: #FEA500;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#item a {
  display: block;
  background-color: #9ACD32;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#shop a {
  display: block;
  background-color: #32CD33;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}

横並びのナビゲーション

ブロックレベル要素は基本的には縦に並んでいくので、
「float」
というプロパティを使用します。

f:id:yachin29:20160314024951j:plain

/* reset */
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*レイアウト*/
ul {
  width: 800px;
  margin: 50px auto 0;
}
li {
  width: 200px;
  height: 50px;
  text-align: center;
  float: left;
}
ul li a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#new a {
  background-color: #FE0000;
}
ul li#info a {
  background-color: #FEA500;
}
ul li#item a {
  background-color: #9ACD32;
}
ul li#shop a {
  background-color: #32CD33;
}
ul li#new a:hover, ul li#info a:hover, ul li#item a:hover, ul li#shop a:hover {
  background-color: #FFF;
}
ul li#new a:hover {
  color: #FE0000;
  border: 1px solid #FE0000;
}
ul li#info a:hover {
  color: #FEA500;
  border: 1px solid #FEA500;
}
ul li#item a:hover {
  color: #9ACD32;
  border: 1px solid #9ACD32;
}
ul li#shop a:hover {
  color: #32CD33;
  border: 1px solid #32CD33;
}

floatとは？

f:id:yachin29:20160314024814j:plain

floatとは、要素のボックス、左、または右に移動させること。通常は横幅をCSSで指定しないと「横幅＝100%」ですが、floatさせたボックスには、width を指定しなくてはいけません。