3カラムレイアウト - 3カラムレイアウトのイメージ

3段組を作るためには2カラムレイアウトを2回使う。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

3カラムレイアウト - 3カラムレイアウトのイメージ

2カラムレイアウトのイメージでは「大きな枠の中に、左右に寄せられた内枠を2つ作る」と説明しましたが、3段組レイアウトは「2段組レイアウトのメインスペース内でさらに2段組を作る」感じになります。

3カラムレイアウトのイメージ

上の図は3カラムレイアウトのイメージを表したもので、緑色の線が外枠、水色の部分が左にくる2段分のスペース、黄色の部分が左右のサイドバーの枠になっています。外枠内に2つの枠を作り、さらに広い方の枠内で2つの枠を作っているのがお分かりになろうかと思います。

この図のように、3カラムレイアウトはまず2カラムレイアウトを作るところから始まり、さらに内部で2カラムレイアウトを作ることになります。3カラムレイアウトをCSSで組む際は、2カラムレイアウトの構造を理解するようにしましょう。