3段組のレイアウトを実現する際に、floatとpositionという要素を使用することが一般的だ。しかし、floatを使用する場合、HTMLの構造がやや不明瞭になることがある。具体的には、div要素でのグループ化がコンテンツと合致しないことがあるため、整理されたマークアップを維持するのが難しい。
一方で、positionを使用することで、必要なdiv要素の数を減らすことができ、ある程度適切なマークアップを保持することができる。しかし、positionを使用したレイアウトでは、floatを使用した場合と同じ表示結果を得ることが難しくなることがある。
どちらの方法を選んでも、本来上から順に縦に並べるべきHTML文書を3段組のレイアウトにすることは難しい側面がある。そのため、マークアップが多少乱雑になることを許容する必要がある。
さて、3段組のレイアウトということは、異なる性質を持つ3つのブロックを配置する必要がある。2段組の場合、通常は「本文＋ナビゲーションなど」の2つのブロックを配置するが、今回は3段組なので、「本文＋ナビゲーション＋広告など」の3つのブロックを考える必要がある。
3つの主な3段組レイアウトのタイプは以下の通りだ：
1. 幅固定 3段組：
このタイプは、ブログなどでよく見られる幅固定のレイアウトだ。メインコンテンツとサイドバーを持ち、必要に応じて左右の配置を入れ替えることができる。
2. 幅可変 3段組：
このレイアウトは、幅可変（リキッド）のデザインで、サイドバーとメインコンテンツが配置される。サイドバーの配置を変更することもできる。
3. メインコンテンツ幅可変、サイドバー幅固定 3段組：
このタイプでは、サイドバーの幅を固定し、残りのスペースをメインコンテンツに割り当てる。また、必要に応じてサイドバーの位置を入れ替えることも可能だ。
この記事では、上記の3つの3段組レイアウトのサンプルを提供する。これらのサンプルは、次に示すHTMLに対してCSSを適用することで実現される。
HTML
<div id="container">
<div id="boxA">
A（ヘッダ）
</div>
<div id="wrapper">
<div id="boxB">
B（メインカラム）
</div>
<div id="boxC">
C（サイドバー1）
</div>
</div>
<div id="boxD">
D（サイドバー2）
</div>
<div id="boxE">
E（フッタ）
</div>
</div>
ウェブページの構造を考える際、HTMLの要素を適切に配置することは見やすさやユーザーエクスペリエンスを向上させる上で重要な要素となる。以下に、ウェブページの構造に関する詳細な説明を述べてみよう。
まず、ウェブページのヘッダーセクションにおけるブログタイトルについて考える。このブログタイトルは、ウェブページの内容を簡潔に示すものであり、h1要素を使用してマークアップすることが適切だ。ボックスAに位置するこの要素は、読者に対してウェブページのテーマや焦点を伝える役割を果たする。
次に、#wrapper要素について考える。これはメインコンテンツとナビゲーションをまとめるための要素であり、ウェブページのレイアウトを整理する際に有用だ。この要素を利用することで、コンテンツのグループ分けが容易になり、読者が情報を見つけやすくなる。
ボックスBに位置するメインコンテンツは、ウェブページの中心となる要素だ。本文などが含まれ、読者に価値ある情報を提供する。メニューよりも前に配置されることで、読者はまず主要なコンテンツにアクセスしやすくなる。
サイドバーその1であるボックスCは、ナビゲーションを含むセクションだ。ここでは、読者がウェブページ内を効果的に移動できるようにリンクやメニューを配置する。サイドバー1とサイドバー2の間には、本文との関連性を考慮しながらコンテンツを配置することで、ウェブページの読みやすさと連続性を確保する。これによって、#wrapper要素がメインコンテンツとナビゲーションを繋ぐ要素としての役割を果たすことができる。
ボックスDには、サイドバーその2が位置する。ここでは、広告や関連する情報を提示することができる。読者が興味を持ちそうなコンテンツを選んで配置することで、ウェブページの利用価値を高めることができる。
最後に、ボックスEには著作権表示などが含まれる。ウェブページの最下部に位置するこのセクションは、クリアフロートを実現するための要素でもある。読者がウェブページの著作権情報や関連リンクを見つけやすくするために重要だ。
このような横幅固定の3カラムレイアウトは、ブログなどのコンテンツを整理し、読者にとって情報の取得がしやすいデザインとなっている。ウィンドウ幅が狭くなった場合でも、横スクロールは生じるが、ウェブページのデザインとコンテンツの配置は維持される。
幅固定 3カラム
ステップ 1. 中央寄せ
body {
text-align:center;
}
#container {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
幅固定 2カラムのときと同様だ。
ステップ 2. #wrapper とボックスD を横に並べる（右側にボックスD）
#wrapper {
width:620px;
float:left;
}
#boxD {
width:180px;
float:left;
}
#boxE {
width:100%;
clear:left;
}
ボックスDが右サイドに配置される際には、#wrapper要素を左にフロートさせる必要がある。また、ボックスEに対してはclearを適用しておくことが重要だ。width:100%というスタイルは、Internet Explorer（以下、IE）におけるバグに対処するための措置だ。
一方、ボックスDが左サイドに配置されるケースでは、floatとclearの設定を変更する。これにより、floatはleftからrightに、clearもleftからrightに変更される。
この調整は、要素の配置や幅に関するバグや問題を回避するために行われる。特に、古いバージョンのInternet Explorerでは、要素のフロートやクリアなどのスタイルに関して互換性の問題が発生することがあった。そのため、適切なスタイルの設定が必要となる。
これらのスタイルの調整により、要素の配置が適切に行われ、クロスブラウザの互換性が確保される。ボックスDとボックスEの位置や幅に関する問題を回避するために、上記のスタイルの設定を適用することが推奨される。
ステップ 3. #wrapper 内のボックスB、Cを横に並べる
#boxB {
width:440px;
float:right;
}
#boxC {
width:180px;
float:right;
}
