3カラムCSSレイアウト実践講座
このカテゴリでは、センタースペースと左右のサイドバーからなる、いわゆる「3カラム(3段組)」レイアウトの作り方について説明しています。
なお、3カラムレイアウトは2カラムレイアウトの応用になります。細かい部分は「2カラムレイアウトの作り方」に説明が記載されていますので、そちらも参考にしてください。
- 3カラムレイアウトのイメージ
2カラムレイアウトを2回使う。
- 表示させる優先順位を決定
左右・センタースペースの配置とHTML上の優先順位を決める。
- 外枠・ヘッダー・フッター
3カラムでも2カラム同様、外枠作りはしっかりと。
- 左右・センターの幅を計算
複雑な3カラム、事前に幅を計算して決めておく。
- 2:1の枠を作る
事前に決めた幅に従い、まずは2カラムを作る。
- 3カラムに仕上げる
2カラムの内部に、さらに2カラムをつくれば3カラムの完成。
- 4カラムへの応用
2カラムの中に2カラムを2つ作れば4カラムに。
