CSSで横並びでメニューボタン配置してみる


うやむやにしてきたメニューボタンの作り方。
これを期に1から作ってみる。


Htmlの用意

<ul class="nav">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>





CSSでボタンを作成する。


ulの操作

丸ぽちを取り除く
.nav {
  list-style: none;
}



liの操作

横幅を指定、背景色ボーダライン、テキストを中央に

.nav li {
  width: 100px;
  background: #FF9900;  
  border:1px solid #000000;
  text-align: center;
}



aの操作

下線を消す。
.nav li a {
  text-decoration: none;
}


テキストの装飾。
.nav li a {
  color: #fff;
  font-weight: bold;
}



ここまでのまとめ1

現状のCSSをまとめるとこんな感じになっている。

.nav {
  list-style: none;
}

.nav li {
  width: 100px;
  text-align: center;
  background: #FF9900;  
  border:1px solid #000000;
}

.nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}







本題

いよいよ横並びにしてく。

liにfloatで横並びになる。
.nav li {
  float: left;
}


このままだと次の要素も回り込んでしまうので、ulに回り込みをさせないための処理を追加。

.nav {
  overflow: hidden;
}


ボタンの高さを指定して、縦の中央に文字が並ぶようにする。
line-heightをheightと同じ値にすることで実現できる。

.nav li {
  height: 30px;
  line-height: 30px;
}



ボタン同士の隙間を空ける。ボタンを押しやすいようにpaddingも指定する。
.nav li {
  margin-right: 5px;
  padding: 10px;
}


ここまでのまとめ2

CSSをまとめるとこうなる。

.nav {
  list-style: none;
  overflow: hidden;
  background:#000000;

}

.nav li {
  width: 100px;
  text-align: center;
  background: #FF9900;  
  border:1px solid #000000;
  float: left;
  height: 30px;
  line-height: 30px;
  margin-right: 5px;
  padding: 10px;

}

.nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}






参考

http://uxmilk.jp/60712