PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【CSS】横並びのナビゲーションを作る

CSSを使って横並びのナビゲーションを作ります。

ブラウザプレビュー

f:id:game-web-design:20140910181827p:plain

ポイント

#nav liをフロートさせるために、その親要素の#nav ulにoverflow: hidden;を指定する。すると横並びになる。

ソース

HTML

<div id="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">カフェフード</a></li>
<li><a href="#">カフェドリンク</a></li>
<li><a href="#">インフォメーション</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>

CSS

/* nav */

#nav{
  width: 750px;
  font-weight: bold;
  margin: 50px auto;
}

#nav ul{
  width: 750px;
  overflow: hidden;
  height: 40px;
  border-top: solid 1px #2C3785;
  border-left: solid 1px #2C3785;
  border-bottom: solid 1px #2C3785;
  background: #8C91DD;
}

#nav li{
  width: 150px;
  float: left;
  line-height: 40px;
  font-size:16px;
  text-align: center;
}

#nav li a{
  display: block;
  border-right: 1px solid #2C3785;
  color: #FFF;
}

#nav li a:hover{
  background:#C6CCDB;
  }