CSS(スタイルシート)レイアウト:3カラム 1／ホームページ作成ビギナーズガイド

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

上にヘッダー、中央にメインコンテンツ、左右にメニューブロック、下にフッター、の3段組レイアウトの作り方を紹介します。

2段組レイアウトの応用なので、そちらを理解してからお読み下さい。

body {text-align:center; margin:0 auto;}
#outer {width:750px; text-align:left; margin:0 auto;}
#header {width:750px;}

#wrapper {float:left; width:600px;}

#center {float:right; width:450px;}
#left {float:left; width:150px;}
#right {float:right; width:150px;}
#footer {clear:both; width:750px;}

<body>

　　　<div id="center">中央の内容</div>

</div>

</div>
</body>

表示例はこちら→サンプルページ（わかりやすいように背景色をつけてます）

2段組レイアウトと重複する説明は省略します。

ポイントは「#wrapper」です。これは#centerと#leftを包むために作ったブロックです。

2段組を2つ使って3段組を作っているわけです。

記述順序は#center、#left、#rightなので、検索エンジンはその順番で読みます。応用すればどの順にでも書けます。