3段組CSSレイアウト実践講座
- 3カラムレイアウト － 3カラムレイアウトのイメージ
2カラムレイアウトのイメージでは「大きな枠の中に、左右に寄せられた内枠を2つ作る」と説明しましたが、3段組レイアウトは「2段組レイアウトのメインスペース内でさらに2段組を作る」感じになります。
- 3カラムレイアウト － 表示させる優先順位を決定
3カラムレイアウトでも2段組レイアウト同様に、左右・中間の枠を自由に配置し、HTML上でも優先順位の通りに記述することができます。
- 3カラムレイアウト － 外枠・ヘッダー・フッター
外枠を作りヘッダー・フッター部分を記述、メインスペースに余白を設定するのは3カラムレイアウトでも同様です。
- 3カラムレイアウト － 左右・センターの幅を計算
外枠ができたらまず2カラムを作るわけですが、その前にしっかりと左右・センター枠の幅を決めておきましょう。
- 3カラムレイアウト － 2：1の枠を作る
事前に決めた幅に従い、まずは2カラムレイアウトを作ります。ここではセンター・左・右の順にHTMLを記載する場合を説明します。
- 3カラムレイアウト － 3カラムに仕上げる
2カラムができたら、広い方の枠内にさらに2段の枠を作成します。幅は事前に決めてありますので、ここまでの作業を確認しながら、再度2カラムレイアウトを施してください。
- 4カラムレイアウトへの応用
2カラムレイアウトを応用することで、3カラムレイアウトを作成することができますが、これをさらに応用することで、4カラムレイアウトも組むことができます。