Lesson 02 3段組みレイアウト - 固定枠のマルチカラム(2) - Webデザイン表現&技法の新・スタンダード・レイアウト編

Webデザイン 表現&技法の 新・スタンダード

Lesson 2

固定枠のマルチカラム(2) 3段組みレイアウト

	制作・文			境　裕司
＞	To Use			CSS
＞	Browser			IE 7over | Firefox 3over | Safari 4over

Webサイトの大半はページの幅をピクセル値で固定するフィックスドレイアウト（Fixed Layout）である。どのような閲覧環境でも、1つのデザインを崩すことなく表現できるのが利点だ。

左側のサブコンテンツと右側のサブコンテンツに、それぞれ幅のピクセル値と floatプロパティが指定されている。XHTMLの情報の並びは、上からヘッダの情報、左側のサブコンテンツの情報、右側のサブコンテンツの情報、メインコンテンツの情報、フッタの情報という順になっていることを理解しておこう【1-1】。


【1-1】サンプルは、ヘッダ＋コンテンツ（左側のサブコンテンツ＋メインコンテンツ＋右側のサブコンテンツ）＋フッタという構成

2段組みと同様にid名を付けておく。左側のサブコンテンツは「leftColumn」、右側のサブコンテンツは「rightColumn」、メインコンテンツは「content」とし、この3つをグ ループ化する＜div id="contentGroup"＞〜＜/div＞が記述されている。2段組みとの違 いは、新たに追加された右側のサブコンテンツだけである【2-1】。


【2-1】左側のサブコンテンツ（leftColumn）の後に、右側のサブコンテンツ（rightColumn）が記述されている

左側のサブコンテンツ（leftColumn）に対してfloat: leftを指定し、親ボックス（contentGroup）の左側に寄せる。続けて、width: 160pxを指定すると、サブコンテンツ領域の幅が160ピクセルに固定される。ここまでは、2段組みの作業手順と同じだ。次は、メインコンテンツではなく、右側のサブコンテンツ（rightColumn）を指定する。XHTMLのソースコードの並びも、左側のサブコンテンツの次は、右側のサブコンテンツの情報が記述されている【3-1】【3-2】。


【3-1】


【3-2】

【3-1】【3-2】左側のサブコンテンツ（leftColumn）に、float: leftとwidth: 160pxを指定。親ボックスの左側に配置される。ここまでは、2段組みと同じ作業の流れ

左側のサブコンテンツ（leftColumn）は親ボックスの左側に【4-1】、右側のサブコンテンツ（rightColumn）は右側に寄り、中央部分にメインコンテンツがおさまる構造になる【4-2】。左右のサブコンテンツの幅はそれぞれ160ピクセルなので、中央部分は460ピクセル（コンテンツ領域全体 780ピクセル-左右のサブコンテンツ320ピクセル）の幅になっている。


【4-1】


【4-2】

【4-1】【4-2】CSSソース。右側のサブコンテンツ（rightColumn）には、float: rightとwidth: 160pxを指定し、親ボックスの右側に配置。このプロセスは、3段組みで追加される部分

メインコンテンツ（content）には、margin: 0 180pxを指定。上下ゼロ、左と右に180ピクセルのマージンを確保する。左右に配置さ れているサブコンテンツの幅よりもそれぞれ20ピクセル分大きめに指定してある。た とえば、左右のサブコンテンツの幅を変更したい場合は（左が140ピクセル、右は180ピ クセルなど）、メインコンテンツのマージン値を変えるだけで、簡単にレイアウトを調整することができる【5-1】【5-2】【5-3】。


【5-1】

【5-2】



【5-3】

【5-1】【5-2】【5-3】メインコンテンツ（content）には、margin: 0 180pxを指定し、左と右それぞれに180ピクセルのマージンをつくる。見た目、3段組みが表現される

2段組みと同様に、段組み領域の後の要素にclear: bothを記述しておく。XHTMLフ ァイルに＜br class="floatClear" /＞を記述し、CSSで.floatClear {clear: both; display:block;}と指定【6-1】【6-2】。対象とするブラウザで開き、作成したページの表示を確認しておこう【6-3】。段組みレイアウトのテクニックは、他にもさまざまな方法があり、Web ページの内容によって変わってくる。ここで紹介したサンプルは、左サブコンテンツ、右サブコンテンツ、メインコンテンツの順に記述されているXHTMLを使用したが、左サブコンテンツ、メインコンテンツ、右サブコンテンツといった順序 で記述したい場合は、メインコンテンツと右コンテンツをグループ化し、その中でそ れぞれfloatプロパティを適用し、左右に配置しなくてはならないので、やや複雑な構 造になる。ただし、floatプロパティの機能や clearプロパティを使った解除の方法な どを理解していれば、容易に習得できるレベルである。


【6-1】


【6-2】段組み領域の後の要素（サンプルではbr要素を追加）にclear: both を記述して、フロート処理を解除しておく


【6-3】フロート処理とマージンを組み合わせた手法は最も安全かつ簡単に実行できるが、段組みレイアウトにはさまざまなテクニックがあり、Web ページの内容によって適した方法が異なる