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

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

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

はじめに

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

メニューボタンのHTML

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

liaタグを使った構成で、メニューボタンを作っていく。

<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でデザインする

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

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

「・」を取り除く

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

.nav {
  list-style: none;
}

liタグの装飾

liタグの横幅を指定し、背景色とボーダーラインをつけてテキストを中央に表示させた。

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

aタグの装飾

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

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

ここまでのまとめ

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

.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;を指定しよう。

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

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

.nav {
  ...
  overflow: hidden;
}

liタグの細かな装飾

liタグのheightline-heightを同じ値にすることで、文字が真ん中へ表示されるようにした。

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

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

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

ここまでのまとめ

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

.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;
}
「キッチンノート.fun」という料理サイトを立ち上げました!このサイトで紹介していた料理記事は、そちらへ移動しました。
記事に関するご質問などがあれば、
Twitter または お問い合わせ までご連絡ください。
オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。

ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

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

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

関連記事