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

このページはCSSで横並びナビゲーション・メニューをデザインする例の続きです。

はじめに

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

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

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

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

HTMLマークアップ

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

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

完成時にはこのような見た目になります。
各メニューの背景や各メニューの区切りが、ほんの少し変化しているのがわかりますか?

今回は:after擬似要素を使ってコンテンツを挿入し、各メニューに変化を加えていきます。

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

18. 前回のデザイン

今回は、前回の最終手順のスタイルを元にデザインしていきます。

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

19. :after擬似要素を使ってa要素にコンテンツを挿入する

:after擬似要素を使えば、HTMLソースに変更を加えなくても、新しいコンテンツ(テキスト)を挿入できます。

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

.globalNav li a:after {
	content: "a";
}

20. a要素に子要素を絶対配置するための基準点を設定する

a要素の中に子要素を絶対配置するための基準点を設定します。

これで、a要素の子要素(:after擬似要素)を絶対位置指定(position: absolute;)で移動させた時に、a要素を基準として配置されるようになります。

position: absolute;で要素を移動させる時には、位置指定の基準にしたい親要素(もしくは先祖の要素)にposition: relative;を指定するクセを付けておくといいでしょう。

本来、position: relative;は要素を相対位置に配置するための記述ですが、子要素を絶対配置するための基準点を作るためによく使用されます。

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

21. :after擬似要素を下から0、左から0の絶対位置に配置する

:after擬似要素をposition: absolute;で左下に配置するとこのようになります。

繰り返しになりますが手順20でa要素にposition: relative;を設定したように、position: absolute;で要素を配置するときは、基準点を意識しましょう。基準点を意識せずに使用すると、よくわからない位置、おかしな位置に配置されたと感じてしまうでしょう。

これは、position: absolute;で要素を移動させる際、親要素や先祖の要素にstatic以外の値が指定されたpositionプロパティがある場合、その要素を基準に配置されるためです。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
}

22. :after擬似要素に仮の背景色をつける

この後の手順で追加するプロパティの影響で、見た目がどのように変化していくかを分かりやすくするため、仮の背景色を設定します。

実際に何かをコーディングする際には、このようにして仮の背景色をつけたり、テキスト色を設定したり、ボーダーを設定するなどして作業を進めると、変化がわかりやすいのでオススメです。

色を指定する際、rgba();を使うとRGBカラー(Red,Green,Blue)の他、Alpha(透明度)を指定できます。rgba(255,0,0,0.5);は透明度50パーセントの赤色です。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255,0,0,0.5);
}

23. :after擬似要素の幅と高さを100%にする

widthheightを100%にします。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255,0,0,0.5);
	width: 100%;
	height: 100%;
}

24. :after擬似要素のコーナーを角丸50%にする

border-radius: 50%;で四隅の角を丸くします。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255,0,0,0.5);
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

25. :after擬似要素の幅を300%にする

例のように、弧になっている部分だけを各メニューに被せたいので、widthを300%に変更し円弧を長くします。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255,0,0,0.5);
	width: 300%;
	height: 100%;
	border-radius: 50%;
}

26. a要素からはみ出た部分を非表示にする

はみ出た部分は非表示にしてしまいます。

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

27. :after擬似要素をY軸方向に50%移動させる

transformプロパティを使って縦方向(Y軸方向)に50%移動させます。

ここでは、色んなプロパティを紹介するためにtransformプロパティを使っていますが、transformプロパティを使わずに、bottom: -50%;と変更しても、bottom: 0;の部分をtop: 50%;と書き換えても同じ見た目になります。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255,0,0,0.5);
	width: 300%;
	height: 100%;
	border-radius: 50%;
	transform: translateY(50%);
}

28. :after擬似要素の背景色を透明度5%の黒にする

:after擬似要素の形や位置が決まりましたので、仮の背景色を変更します。

もし、rgba()による色指定が好きになれないなら、background: #000;background: black;のような形で背景色を指定し、opacity: 0.05;のスタイルを追加すれば同じ見た目になります。

background: rgba();の指定では背景色だけ透過されるのに対し、opacityの指定では要素自体の透明度が変更されます。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.05);
	width: 300%;
	height: 100%;
	border-radius: 50%;
	transform: translateY(50%);
}

29. 現在のページ(アクティブなページ)のメニューの:after擬似要素の背景色を変更する

アクティブなページのみ、擬似要素の背景色を変更します。

.globalNav li a:after {
	content: "a";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.05);
	width: 300%;
	height: 100%;
	border-radius: 50%;
	transform: translateY(50%);
}

.globalNav li.active a:after {
	background: rgba(255,255,255,0.1);
}

30. :after擬似要素のコンテンツ内容を空にする

最後に、content: "a";の中身を消してしまいましょう。

途中からaというテキストは表示されなくなっていたので、忘れてしまっていたかもしれません。できれば、もう少し早い段階で消してしまったほうがいいでしょう。

.globalNav li a:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.05);
	width: 300%;
	height: 100%;
	border-radius: 50%;
	transform: translateY(50%);
}

31. li要素の左右に1pxのpaddingを設定する

最後の最後に、li要素の左右に1pxのpaddingを設定します。

いかがでしょう?なんだか小洒落た感じになったと思いませんか?

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

完成時のCSS(全体)

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

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

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

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

.globalNav li a:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 300%;
	background: rgba(0,0,0,0.05);
	height: 100%;
	border-radius: 50%;
	transform: translateY(50%);
}

.globalNav li.active a:after {
	background: rgba(255,255,255,0.1);
}

最後に

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

CSSで横並びナビゲーション・メニューをデザインする例の内容なら全部知ってた!という方でも、知らない点が出てきたかもしれません。前回の内容をなんとか理解できたという方は、知らない点が多かったでしょうか。

どちらにしても、知らない点が出てきたら、どんどん調べて学習を進めましょう。

1つ1つのプロパティを理解して使用すれば、CSSは怖くありません。