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

この記事では、スタイルシートのfloatを使って、メニューボタンを横並びにするやり方を解説していく。

メニューボタンの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;
}

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazonRakuten
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazonRakuten
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazonRakuten

Amazonでお得に購入するなら、Amazonギフト券がオススメ!

\Amazonギフトがお得/

コンビニ・ATM・ネットバンキングで¥5,000以上チャージすると、プライム会員は最大2.5%ポイント、通常会員は最大2%ポイントがもらえます!
Amazonギフト券

\この記事をシェアする/