【CSS】メニューボタンをfloatで横並び表現するやり方

【CSS】メニューボタンをfloatで横並び表現するやり方
【CSS】メニューボタンをfloatで横並び表現するやり方

この記事では、CSSのfloatプロパティを使って、メニューボタンを横並びにするやり方を解説していく。

はじめに

CSSによる要素の横並び表現では、floatプロパティが今まで使われてきましたが、最近ではFlexboxプロパティを使うほうが簡単ですし主流になってきてます。Flexboxの使い方については 【CSS】Flexboxで横並び表現 の記事や書籍をご覧ください。

メニューボタンのHTML

スタイルシートなしのメニューボタン
スタイルシートなしのメニューボタン

liaタグを使った構成で、メニューボタンを作っていく。
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でデザインする

メニューボタンのデザイン
メニューボタンのデザイン

横並びを実現する前に、この画像のようなメニューボタンらしくしておこう。

「・」を取り除く

まずは、デフォルトで表示される「・(黒丸)」を取り除く。

css
.nav {
  list-style: none;
}

liタグの装飾

liタグの横幅を指定し、背景色とボーダーラインをつけてテキストを中央に表示させた。
css
.nav li {
  width: 100px;
  background: #FF9900;  
  border:1px solid #000000;
  text-align: center;
}

aタグの装飾

aタグの下線(アンダーライン)を非表示にして、テキストの色と太さを設定した。

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

ここまでのまとめ

ここまでのスタイルシートをまとめると、次のようになっている。

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

floatプロパティで横並びを表現

横並びのメニューボタン
横並びのメニューボタン

それではメニューボタンをこの画像のように横並びにしていく。

横並びの表現

横並びにするにはfloatプロパティを使う。次のように、liタグにfloat: left;を指定しよう。

css
.nav li {
  ...
  float: left;
}

しかし、このままではメニューボタン以降の要素も回り込んでしまう恐れがある。回り込みをさせないためには、ulタグにoverflow: hidden; を追加する。

css
.nav {
  ...
  overflow: hidden;
}

liタグの細かな装飾

liタグのheightline-heightを同じ値にすることで、文字が真ん中へ表示されるようにした。
css
.nav li {
  ...
  height: 30px;
  line-height: 30px;
}

また、ボタン同士の間隔を少し開け、ボタンを押しやすいようにpaddingを指定した。

css
.nav li {
  ...
  margin-right: 5px;
  padding: 10px;
}

ここまでのまとめ

ここまでのスタイルシートをまとめると、次のようになる。

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

関連記事

最後までご覧いただきありがとうございます!

▼ 記事に関するご質問やお仕事のご相談は以下よりお願いいたします。
お問い合わせフォーム

オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。 ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。

▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説してます。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。

SEO関連のオススメ書籍