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