画面の左右に均等な余白を作る

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
	text-align       : center;
	background-color : #333333;
	margin           : 0px;
	padding          : 0px;
}
#main {
	width            : 700px;
	margin-left      : auto;
	margin-right     : auto;
	text-align       : left;
	background-color : #ffffff;
	height           : 100%;
}
-->
</style>
</head>
<body>
<div id="main">

ここに内容

</div>
</body>
</html>

表示サンプル

別窓でサンプルページが開きます。

解説

margin-leftとmargin-rightにそれぞれ「auto」を指定してやることにより「div」で囲んだ部分が中央寄せとなります。「width」の数値を変えることによって、余白部分の幅が変化します（本当は逆ですが）。背景色の指定部分（background-color）と高さの指定部分（height）はお好みに応じて指定して下さい。