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

CSSによる2段組レイアウトは、外枠を作って内枠を左右に寄せる。

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

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

2カラム(2段組)レイアウトの場合、「大きな枠の中に、左右に寄せられた内枠を2つ作る」というのが大まかなイメージになります。

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

上の図は2カラムレイアウトのイメージを表したもので、緑色の線が外枠、水色の部分がメインスペース、黄色の部分がサイドバーの枠になっています。

メインとサイド、2つの枠を作るわけですが、それぞれを「配置する」というより、上の図のように「外枠の範囲内でそれぞれのスペースを左右に寄せる」というイメージです。

実際、それぞれのスペースはCSSプロパティ「float」を利用して左右に寄せて配置することになり、これがCSSレイアウトの根幹をなすものとなります。(注)

【注意】
floatプロパティを使ってスペースを左右に寄せる方法以外にもCSSでレイアウトを組む方法はありますが、当サイトではできるだけ多くのブラウザで崩れが発生しないよう、floatを使って左右に枠を寄せるという手法を採用しています。