ボックスBを右にフロートさせ、3段組のボックスBを中央に配置する。ボックスCも同様にフロートさせる。
幅固定 3カラムのサンプル
サイドバーの左右入れ替え
body {
text-align:center;
}
#container {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#wrapper {
width:620px;
float:right;
}
#boxD {
width:180px;
float:right;
}
#boxE {
width:100%;
clear:right;
}
#boxB {
width:440px;
float:left;
}
#boxC {
width:180px;
float:left;
}
float と clear の値の left と right を入れ替えるだけだ。
各カラムの間に 10px の余白を設ける
body {
text-align:center;
}
#container {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#wrapper {
width:610px;
float:left;
margin-right:10px;
}
#boxD {
width:180px;
float:left;
}
#boxE {
width:100%;
clear:left;
}
#boxB {
width:420px;
float:right;
margin-left:10px
}
#boxC {
width:180px;
float:right;
}
左フロートには左マージンなし、右フロートには右マージンなしを指定するのが無難だ。
左フロートに関しては、その要素の左端に他の要素を配置しながら、その要素自体は右側に浮かせるスタイルが適用される。これに対して、右フロートは逆に要素を右端に配置しながら、自身を左側に浮かせるスタイルが適用される。この際、要素に特定のマージンを指定せず、コンテンツの配置を行うことが一般的に推奨される方法となる。
また、ウェブページのデザインにおいて、サイドバーやコンテンツエリアの配置を左右に切り替える場合、floatとclearの値を調整することで実現できる。要するに、floatの値をrightからleftに、またはleftからrightに変更することで、要素の配置を反転させることができる。
次に、固定幅を持つ3カラムの余白を考える。このレイアウトでは、各カラムの幅が固定されており、それぞれの間に余白が設けられている。一方で、幅可変の3カラムレイアウトにおいては、幅をパーセンテージ（%）で指定するため、幅の計算には注意が必要だ。ここでポイントとなるのは、マージン、パディング、ボーダーをピクセル（px）やem単位で指定できないことだ。これにより、要素のサイズの計算がより複雑になる。
幅可変の3カラムレイアウトは、floatを使用して実現することが一般的だ。しかし、このアプローチにはいくつかのテクニックが必要だ。詳細は幅可変2カラムレイアウトの説明を参照していただきたい。3カラムの場合、幅の計算は少々複雑だが、それでも実現可能だ。
さらに、カラム間に1%の隙間を持つ幅可変の3カラムレイアウトも考えられる。この場合、左右のカラムの幅は同じで、中央カラムがやや広めに設定される。カラム間の余白を1%に保つことで、コンテンツ同士が重なるのを防ぎ、読みやすいデザインが実現される。ただし、HTMLの構造上、左右のカラムの親要素が異なるため、幅の計算がやや複雑だ。最終的な幅の割合は、左カラムが24%、中央カラムが50%、右カラムが24%となり、合計でコンテナブロックの98%の幅を占めるように調整される。
ステップ 1. 中央寄せ
body {
text-align:center;
}
#container {
width:96%;
margin-left:auto;
margin-right:auto;
text-align:left;
}
可変幅 2列の場合と同じ。
ステップ 2. #wrapper とボックスD を横に並べる（右側にボックスD）
#wrapper {
width:75%;
float:left;
}
#boxD {
width:24%;
float:right;
}
#boxE {
width:100%;
clear:both;
}
幅が75%で左にフロートする要素「#wrapper」と、幅が24%で右にフロートする要素「ボックスD」が登場する。ここで重要なのは、これらの要素の幅の合計が100%に達していない点だ。また、次に登場する「ボックスE」における「clear」プロパティは、「both」と指定される。
これにより、要素の配置に特定のレイアウトが生じる。まず、「#wrapper」と「ボックスD」がそれぞれ左右にフロートするため、両者は横並びに配置される。しかし、その幅の合計が100%に達していないため、次に配置される要素が影響を受けることになる。
そして、「ボックスE」が登場する。ここで「clear」プロパティが「both」と指定されているため、この要素は「#wrapper」と「ボックスD」のフロートの影響を受けず、これらの要素の下に配置されることが確定する。この配置によって、要素同士が重なることなく、スムーズなレイアウトが実現される。
こうしたレイアウトの指定は、ウェブページのデザインや構造を細かく制御する際に非常に重要だ。幅の割合やフロートの設定によって、コンテンツがどのように配置されるかが大きく変わる。そのため、これらの指定を正しく理解し、適切に使用することが、読みやすく魅力的なウェブページを作成する鍵となる。
ステップ 3. #wrapper 内のボックスB、Cを横に並べる
#boxB {
width:66.7%;
float:right;
}
#boxC {
width:32%;
float:left;
}
幅を計算する際の要点は、この段階で明確に考え抜かれている。ボックスBとボックスCは、コンテナ内の#wrapperというエレメントに配置されるものであり、その幅はコンテナの幅の75%とされている。コンテナの幅が基準で100と仮定すると、それに基づくと、#wrapperの幅は75、ボックスDは24となり、その間に1の余白が確保される。
次に、ボックスCの幅に関しての計算が行われる。ここでの目標は、ボックスDと同じ幅にするため、75 * 0.32を計算することで、32%という数値が導き出される。
ボックスBの幅についての計算は、ボックスBとCの間に1の余白が存在するようにするために行われる。具体的には、幅を66.7%と設定することで、ボックスBの幅は、75 - 75 * 0.667 - 24によって約0.975（およそ1）となるよう調整される。
そして、最後に配置についての指示が述べられている。ボックスBは右フロートで、3カラムの中央に位置することが求められ、一方でボックスCは左フロートで左端に配置されることとなる。
これによって、各ボックスの幅や配置に関する具体的な数値とステップが明確に示され、柔軟なデザインの実現が図られている。こうした計算や配慮に基づく設計は、ウェブデザインにおいて正確で洗練された外観を実現するための基本となる。
