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

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

参考: http://uxmilk.jp/60712

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>

f:id:araemonz:20180729101918p:plain

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;
}

f:id:araemonz:20180729101937p:plain

本題

いよいよ横並びにしてく

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;
}

f:id:araemonz:20180729101953p:plain