CSSで横並びメニューの設置方法

HTMLやCSSでメニューバーを作るときは<ul>と<li>を利用します。しかし、<ul>や<li>はブロック要素のため、自動的に改行されてしまい縦並びになってしまいます。

今回は、CSSでの横並びメニューの指定方法を紹介します。

<ul id="nav">
  <li><a href="#">MENU1</a></li>
  <li><a href="#">MENU2</a></li>
  <li><a href="#">MENU3</a></li>
  <li><a href="#">MENU4</a></li>
</ul>

上記のHTMLが基本になります。これにCSSで付け加えていきます。

1 １.基本の設定
2 ２.横並びにする

１.基本の設定

#nav {
  list-style: none;
}

#nav li {
  width: 140px;
  text-align: center;
}

#nav li a {
  text-decoration: none;
}

テキストの左にある黒い点と下線を「list-style: none;」と「text-decoration: none;」で消し、メニューボタンの幅は140pxに指定します。

#nav {
  list-style: none;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
}

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

背景色をグレー（#333）、文字色を白（#fff）に指定し、「font-weight: bold;」で太字にしました。

２.横並びにする

floatを利用する場合

#nav {
  list-style: none;
  overflow: hidden;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  float: left;
}

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

li要素に「float: left;」を追加します。しかし、それだけだと意図しない回り込みが発生してしまい、レイアウトが崩れてしまうことがあるため親要素に「overflow: hidden;」を追加して回り込みを解除します。

#nav {
  list-style: none;
  overflow: hidden;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  float: left;
  height: 50px;
  line-height: 50px;
  margin-right: 2px;
}

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

クリックしやすくなるよう、ボタンの高さを「height: 50px;」に指定して大きくしました。「height:」で指定した数字と同じpxで「line-height:」を指定すると縦方向の中央揃えにすることができます。

a要素の「padding:」を設定するとクリックできる領域が広がるので、ボタンの大きさに合わせて設定をします。

li要素に「margin-right: 2px;」を指定してボタンを区切り、境目がわかりやすいようにします。

display:inline-blockを利用する場合

#nav {
  list-style: none;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  display: inline-block;
}

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

「display: inline-block;」を記述することで、横並びにする方法もあります。これを利用するとボタンの間に意図しない隙間ができることがあります。

#nav {
  list-style: none;
  font-size: 0;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  display: inline-block;
  font-size: 16px;
}

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

上記のように親要素に「font-size: 0;」、li要素に「font-size: （任意の大きさ）;」を指定してあげることで隙間をうめることができます。

display: flex;を利用する場合

#nav {
  list-style: none;
  display: flex;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  height: 50px;
  line-height: 50px;
  margin-right: 2px;
}

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