ボックス幅の指定とボックスのセンタリング

前回、CSSのbackground-colorプロパティで <div id="pagebody"> ～ </div> の部分の背景色を白くしました。

今回は、この部分の横幅を固定して、ページ全体のセンターに配置しましょう。 base.cssに以下の記述を追加してください。

@charset "utf-8";
body {
	background-color:#cccccc;		/*ページ全体の背景色*/
	font-size:95%;			/* フォントサイズを95%にする */
	font-family: "ＭＳ ゴシック",sans-serif;	/* フォントの種類をゴシック系にする */
	line-height:1.5;		/* 行の高さを1.5倍にする */
	color:#333333;			/* 文字色を濃い目のグレーにする */
}
div#pagebody {
	width:1000px; margin:0 auto;	/*内容全体をセンタリング*/
	background-color:#ffffff;	/*内容全体の背景色*/
}

/*============================================
メインメニュー
============================================*/
ul#menu {
	width:960px; height:50px; 	/*メインメニュー部分の幅と高さ*/
}
#menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:left;			/*リスト項目を横に並べる*/
}
#menu li a {
	background-color:navy;		/*背景色*/
	color:#ffffff;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	width:240px; height:35px;	/*幅と高さ*/
	padding:15px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
	background-image:url(images/bg_menu1.png);	/*背景画像を指定*/
	background-repeat:no-repeat; 			/*背景画像を繰り返さない*/
}
#menu li a:hover {
	background-color:#000066; 	/*リンクにマウスが乗ったら背景色を変更する*/
	background-image:url(images/bg_menu2.png); 	/*リンクにマウスが乗ったら背景画像を変更する*/
}

保存をしたらブラウザで表示してみましょう。 背景が白いメインコンテンツ部分の横幅が固定されて、センタリングされれば成功です。

変更前を確認する

横幅を固定して左右にマージンを振り分ける

今回追加したCSSソースでは、width:1000px; で幅を1000ピクセルに固定して、margin:0 auto;でボックスをセンタリングしています。 これは「横幅1000ピクセルのボックスを、左右マージンを自動算出して配置しなさい」と指定していることになります。

margin:0 auto; の部分は、0とautoの２つの値を半角スペース区切りで指定しています。 marginプロパティの値を２つ指定すると、記述した順に[上下] [左右]のマージンを指定したことになります。 margin:0 auto; は、上下マージンを無しにして、左右マージンを自動算出にするという指定です。

パソコン上のブラウザの画面は1000ピクセルを超えることが多いため、余った部分がマージンとしてボックスの左右に均等に振り分けられます。 結果として、横幅1000ピクセルのボックスが、親要素に対してセンタリングされることになります。

ブラウザの初期スタイル

サンプルサイトのコンテンツ部分をセンタリングして背景色を白くしましたが、そうしたことで、メインメニュー部分の表示がセンターからずれていることがはっきりと分かるようになりました。

できれば紺色のメインメニュー部分を白い背景の中央に配置したいのですが、現状では右にずれてしまっています。

これは、ul要素には、ブラウザの初期スタイルとして左余白が設定されているためです。 メインメニュー部分に使用したul要素は、CSSの指定でリストマーカー無しにしましたが、本来リストマーカーが表示される左側が余白として空けられたままになっているのです。

このようなブラウザの初期スタイルは、ul要素に限らず、他の要素でも設定されていることがあります。 例えば、特にスタイルシートを指定しなくても、一般的なブラウザではh1要素は大きく太字で表示され、blockquote要素はインデント（字下げ）されて表示されます。

制作者側で特にCSSを指定しなくても、ある程度読みやすくレイアウトされるので便利でもあるのですが、ピクセル単位でレイアウトを作成していく際には、このスタイルの初期設定が邪魔になることもあります。 制作者の意図とは違うスタイルがあらかじめ設定されていたり、ブラウザごとにデフォルトスタイルが微妙に異なっているためです。

次回は、このブラウザの初期スタイルの余白をリセットするCSSソースを追加します。 ブラウザの初期スタイルを一旦リセットしてから、制作者のCSSソースを指定してウェブデザインを進めていくやり方は、ウェブ制作で用いられることの多い一般的な手法となっています。

Sponsors