ホームページ作成の基礎からご提供するホームページ作成Space

 

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

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

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

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