CSSレイアウトの構築
Webページの横幅を指定する
ここで使うプロパティ
width :値 ;
横幅をしていする
横幅を指定して整えることでしっかりとしたレイアウトに仕上げてみましょう。 横幅を指定するのはwidthです。指定する数値の単位は色々あるんですが、今回はpx(ピクセル)で揃えてください。 ちなみに縦幅の指定はheightを使います。
横幅は、自由に決めても良いですが、800pxを超えると、パソコンによっては横スクロールがでることがあり、とても見にくくなるので今回は800pxピッタリにしました。 縦幅は、コンテンツの量によって自動で変化させるので、指定しません。
divタグがたくさんありますが、一番外側のbodyに800pxの指定をすることで、全体が横幅800pxで揃えられます。
左右に並んだdivはそれぞれ個別に横幅を指定します。ポイントはWebページ全体の横幅(body)を800pxに指定したので、左右に並んだdivタグの横幅は、合計が800px以下になるように設定してください。
今回は左(メニュー)を200px
右(メイン)を600pxにします。
ホームページ ソース
XHTML(HTML)
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
CSS(スタイルシート)
#body {
width :800px ;
}
width :800px ;
}
#box-1 { }
#box-2 {
float : left;
width :200px;
}
float : left;
width :200px;
}
#box-3 {
float : right;
width :600px;
}
float : right;
width :600px;
}
#box-4 { }