メニューのサイズを指定する

ここから数回は、CSSでメインメニュー部分のスタイリングをしていきます。 HTMLソースはそのままに、CSSの指定のしかた次第で見栄えが大きく変化することを実感してください。

まず、CSSでメインメニューのサイズを指定しましょう。 base.cssに以下の記述を追加してください。

@charset "utf-8";
body {
	font-size:95%;		/* フォントサイズを95%にする */
	font-family: "ＭＳ ゴシック",sans-serif;	/* フォントの種類をゴシック系にする */
	line-height:1.5;	/* 行の高さを1.5倍にする */
	color:#333333;		/* 文字色を濃い目のグレーにする */
}

/*============================================
メインメニュー
============================================*/
ul#menu {
	width:960px; height:50px; 	/*メインメニュー部分の幅と高さ*/
}
#menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:left;			/*リスト項目を横に並べる*/
}
#menu li a {
	display:block;			/*リンク部分をブロック表示にする*/
	width:240px; height:35px;	/*幅と高さ*/
}

保存をしたらブラウザで表示してみましょう。 メインメニュー部分のサイズが拡がり、クリックできるリンク範囲が広くなれば成功です。

変更前を確認する

上記のCSSソースを、いくつかの部分に分けて見ていきましょう。

メインメニュー全体の幅と高さを指定する

width:960px; height:50px; は、メインメニュー全体を横幅960、高さ50ピクセルに指定しています。 ul#menu { ～ } というセレクタは、「menuというid名を付けられているul要素」をスタイル適用の対象にするということです。 このul要素のサイズがメインメニュー全体のサイズとなります。 この範囲内に各メニュー項目のリンク部分を収めていくことになります。

クリックできるリンク範囲を広くする

display:block; は、各メニュー項目のリンク部分となるa要素の表示形式をブロック表示にしています。 この指定により、リンク部分の幅と高さをブロック状に固定することが可能になります。 width:240px; height:35px; で、a要素のサイズを240×35ピクセルにすることで、クリックできるリンク範囲を広くしています。

リストをフロート配置にする

a要素をブロック表示にすると、メニューリンクがひとつひとつ改行されて縦メニューになります。 これを横メニューにするために、float:left; の指定でli要素をフロート配置にして横に並ぶようにしています。

フロート配置とは、要素の配置を浮遊状態にしてしまう配置スタイルのことです。 フロート配置になった要素は、他の要素に対して浮いたような状態となります。 前の要素がフロートして左に寄せられると、後に続く要素は空いたスペースを埋めるように配置されます。

フロート配置におけるカラム落ち

上記のスタイル指定では、a要素のサイズを固定して、さらにそれをフロート配置にして横に並べました。 この際、注目して欲しいのは、親要素となるul要素の横幅を960px、a要素の横幅を240pxと指定している点です。

横に並べるa要素は４つですから、横幅が240px×4＝960pxとなって親要素の横幅と同じになります。 子要素となる４つのa要素の横幅の合計が、親要素の横幅を超えていないためにうまく横に並んでいられるのです。

試しに親要素の横幅を959pxにして（1ピクセル小さくして）、表示確認をしてみましょう。

最後のa要素が親要素の範囲に入りきらずに改行されてしまっています。 この状態をカラム落ちと言います。 カラム落ちが分かりやすいように、背景画像の付いた状態で比べてみましょう。

ul要素の横幅960pxの場合にはカラム落ちしない

ul要素の横幅959pxの場合にはカラム落ちが起きる

横に並べるa要素の横幅の合計960pxが、親要素となるul要素の横幅959pxを超えてしまったために、カラム落ちが起きたのです。

Sponsors