当サイトでは大まかに言ってページを上図のようなパーツにdivで分割して、CSSで3カラムで組んでいます。
1はページ上部のテキスト部分
2は1以外の下記の3、4、5、6、7、8の部分を含む部分
3はヘッダー部分
4はメインカラム(５)と左側カラム(６)を含む部分
7は右側のカラムの部分。
8フッター部分
と8つのパーツからなっています。
各パーツの配置の考え方
パーツの配置の方法というのは、いろいろな方法がありますが、当サイトではシンプルな３カラムの配置にしています。
２のパーツは、１以外の部分をまとめる役割を果たしています。
4、5、6、7の部分ではfloatを使って左右に配置しています。４は左、４の中で５は右、６は左、７は右詰めで配置しています。
最後の8のパーツ部分でfloatをclear: both;で解除してセンター配置に戻しています。
１以外の全体を含む２の部分はセンター配置にしています。(marginのrightとleftをautoに設定)
次にこの配置を実際にCSSで組むにはどうするかという説明をしていきます。
- サイト
