CSSで横並びナビゲーション・メニューをデザインする例

横並びナビゲーション・メニューをCSSでデザインしていきながら、それぞれのCSSを解説していきます。

はじめに

この記事はHTML・CSSの基本的な仕組みを知っている(基礎学習を終えている)、以下のような方々のために書かれたものです。

  • もう少し難しい内容にチャレンジしたい
  • もう一度HTML・CSSに挑戦したい
  • より実践的な例で学習したい
  • より実践的な例で学習させたい

一般的な入門レベルと比べ、より実践的な内容になっていますので、説明や解説が足りないと感じるかもしれません。知らない単語や用語、知らないプロパティが出てきたら、順番に調べながら学習を進めてください。

このページではHTML5 Reset StylesheetのリセットCSSが有効になっています。 そのため、リセットCSSを使用していないページや、別のリセットCSS・ノーマライズCSSを使用しているページで実践した場合に、同じ見た目にならない可能性があります。

HTMLマークアップ

今回の例では、下記のようにマークアップしたHTMLパーツを元に、CSSでデザインしていきます。このHTMLマークアップは最後まで一度も変更しません。

CSSでデザインしたナビゲーション・メニュー(完成時)

今回のコーディング例の通りにコーディングすると、完成時にはこのような見た目になります。

ナビゲーションをデザインする手順

0. スタイル指定が何もない状態

スタイル指定が何もない状態では、このような見た目になります。

.globalNav {
}

1. リストマークを消す

リストマーク(左にある黒い点)は消してしまいましょう。

.globalNav {
	list-style: none;
}

2. li要素をfloatして横並びにする

li要素はブロックレベル要素なので、最初は縦に並んでいます。
li要素にfloat: left;を指定すると、後に続く要素が右側に回り込むようになり、横並びになります。

.globalNav {
	list-style: none;
}

.globalNav li {
	float: left;
}

3. ul要素の高さが自動算出されるようにする(floatによる問題を解消する)

2の手順で、ul要素の子要素(li要素)がfloatされた状態になりました。
しかし、子要素が全てfloatされた状態になっていると、親要素(ul要素)の高さが無くなってしまうという問題がでてきます。

この問題を解消するための一般的な方法はclearfixを使うことですが、今回はoverflow: hidden;で問題を解消しておきます。もちろん、clearfixを使用しても構いません。

overflow: hidden;でもfloatによる問題を解消できることを覚えておくと、何かと役に立ちます。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
}

4. a要素をブロックレベル要素にする

a要素をブロックレベル要素にします。

a要素はインライン要素ですが、インライン要素のままでは上下のpaddingが効かない他、widthheightも指定できないためブロックレベル要素にします。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
}

.globalNav li a {
	display: block;
}

5. a要素にpaddingを設定しクリックしやすい大きさのボタンにする

a要素に対してpaddingを設定し、テキストの上下左右の部分もクリックできるようにします。

li要素に対してpaddingを設定しても、クリックできる領域は広がりません。
そのため、li要素ではなくa要素に対してpaddingを設定する方が、より良いコーディングと言えるでしょう。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
}

6. li要素に縦線を付けてメニューを区切る

各メニューの境目が分かるようになり、ナビゲーションの形にぐっと近づきました。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
}

7. span要素をブロックレベル要素にする

アルファベットの部分を文字の下に持ってくるため、span要素をブロックレベル要素にします。
これはブロックレベル要素の前後には改行が入るという仕様を利用したものです。

strong要素をブロックレベル要素にしても構いませんが、後の手順にあるCSSの記述も変更する必要がありますので、ここではspan要素をブロックレベル要素にしておいてください。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
}

.globalNav li a span {
	display: block;
}

8. a要素のテキストを中央寄せにする

各メニューのテキストを中央寄せにすると、小洒落た感じになります。

a要素にtext-align: center;を指定すると、ブロック要素になったspan要素まで中央寄せになっているように見えますが、そうではありません。

span要素が中央寄せになっているように見える理由は、親要素(a要素)に指定したtext-alignのプロパティが子要素(span要素)にも継承され、span要素中のテキストが中央寄せになっているためです。

テキストだけが中央寄せになっていることは、試しにspan要素に背景色を指定してみると、よく分かるでしょう。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
}

.globalNav li a span {
	display: block;
}

9. a要素のテキストの下線を消す

リンクテキストの下線を消します。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
}

.globalNav li a span {
	display: block;
}

10. a要素のテキスト色を濃い灰色にする

テキストの色はお好みで設定してください。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
}

11. span要素のテキスト色を灰色にし、テキストにメリハリを付ける

a要素に指定した色より薄い色を指定すると、小洒落た感じになります。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	color: #AAA;
}

12. span要素のテキストを全て大文字にする

アルファベットを全て大文字にします。

アルファベットを全て大文字にしたい、全て小文字にしたい、単語の先頭を大文字にしたい、
そのような場面に遭遇しても、HTMLソースを修正する必要はありません。CSSで調整できます。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	color: #AAA;
	text-transform: uppercase;
}

13. span要素の文字サイズを少し小さくする

アルファベットを大文字にした分、文字サイズを少し小さくし、テキスト同士のバランスを調整します。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	color: #AAA;
	text-transform: uppercase;
	font-size: 80%;
}

14. span要素の文字の間隔を調整する

アルファベット部分の文字の間隔を調整します。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	color: #AAA;
	text-transform: uppercase;
	font-size: 80%;
	letter-spacing: 1px;
}

15. span要素にmarginを設定し、テキスト同士の上下の間隔を調整する

テキスト同士の上下の間隔を調整すると、より小洒落た感じになります。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	margin: 3px 0 0 0;
	color: #AAA;
	text-transform: uppercase;
	font-size: 80%;
	letter-spacing: 1px;
}

16. a要素にカーソルが乗った際の背景色を、薄い灰色にする

多くの場合、メニューやボタンにマウスカーソルが乗ると何らかの変化がおきます。
リンクテキストの下線が消える・下線が付く、リンクテキストの色が変わる、ボタンの色が変わるなど、様々です。

今回は、ボタンの色(背景色)を変えましたので、マウスカーソルを乗せて確認してみましょう。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	margin: 3px 0 0 0;
	color: #AAA;
	text-transform: uppercase;
	font-size: 80%;
	letter-spacing: 1px;
}

.globalNav li a:hover {
	background: #EEE;
}

17. 現在のページ(アクティブなページ)のメニューの背景色を変える

現在のページとそうでないページのメニューにも何らかの差があると、ユーザーに対して少し親切です。

今回の例では、<li class="active">のように、現在のページを示すli要素にクラスを割り当て、背景色を変えました。

<li><a class="active">のように、a要素にクラスを割り当ててデザインしても間違いではありません。
しかし、li要素に変化が付けられないので、少し汎用性が低いと言えるでしょう。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	margin: 3px 0 0 0;
	color: #AAA;
	text-transform: uppercase;
	font-size: 80%;
	letter-spacing: 1px;
}

.globalNav li a:hover {
	background: #EEE;
}

.globalNav li.active a {
	background: #333;
}

18. 現在のページ(アクティブなページ)のメニューのテキスト色を変える

最後に、背景色の変更にあわせて、テキストの色を変えれば完成です。

.globalNav {
	list-style: none;
	overflow: hidden;
}

.globalNav li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
}

.globalNav li a span {
	display: block;
	margin: 3px 0 0 0;
	color: #AAA;
	text-transform: uppercase;
	font-size: 80%;
	letter-spacing: 1px;
}

.globalNav li a:hover {
	background: #EEE;
}

.globalNav li.active a {
	background: #333;
	color: #EEE;
}

最後に

今回の例はいかがでしたか?

このページにある手順や記述が100パーセント正しいというわけではありません。大切なのは、それぞれのCSSプロパティの意味を理解して使用することです。

あなたが正しいコーディングを求めてこのページに辿り着いたのなら、このページを読んだ後で、あなたのソースコードを見直してみましょう。このページと同じように、全ての行を説明できますか?

もし、あなたが書いたコードなのに、説明できない行があるようなら、その行のプロパティを再学習してみることをオススメします。

また、別の方法や、より適したコーディングもたくさんあるでしょう。このページを1つの例として、誰かとディスカッションしてみるのも、ステップアップに繋がると思います。