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

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

Lesson 1

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

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

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

Webサイトの大半は、雑誌や新聞などのレイアウトを模した段組みのデザインで作られている。それを実現するテクニックとして最も普及しているものは、floatプロパティを使用した方法である。例えば2段組みを表現したい場合、2つの段落グループを左右に配置することになる。最も安全かつ簡単なのは、幅を固定した段落にfloatを指定し、後続の段落に（floatを指定した段落と同じ幅の）マージンを指定して段組みを表現する方法だ【1-1】


【1-1】幅のサイズをピクセル値で固定した段落にfloatを指定し、後続の段落にマージン（余白）を指定して擬似的に2段組みを表現する方法

具体的に解説していこう。Webページは、ヘッダ＋コンテンツ＋フッタの3つの領域に分け、コンテンツは「サブコンテンツとメインコンテンツ」で構成する。要素にはそれぞれid名を設定しておく。まず、サブコンテンツは「leftColumn」、メインコンテンツは「content」とし、この2つをグループ化する＜div id="contentGroup"＞〜＜/div＞を記述する。この場合、contentGroupが「親」ボックスで、 leftColumnとcontentが「子」ボックスという関係になる【2-1】【2-2】。


【2-1】サンプルのページは、ヘッダの領域＋コンテンツの領域（サブコンテンツ＋メインコンテンツ）＋フッタの領域で構成されている


【2-2】XHTML ソース

まず、コンテンツ全体の領域（ヘッダ＋コンテンツ＋フッタ）の幅を、780ピクセルに固定し、サブコンテンツ（leftColumn）とメインコンテンツ（content）にそれぞれ、スタイルを指定する。ここが段組みの部分で、前述したfloatプロパティを利用したテクニックを使う【3-1】【3-2】。


【3-1】

【3-2】

【3-1】【3-2】コンテンツ全体の領域の幅を780ピクセルに固定、サブコンテンツとメインコンテンツそれぞれに段組み表現のためのスタイルを指定していく

サブコンテンツ（leftColumn）に対してfloat: leftを指定し、親ボックス（contentGroup）の左側に寄せる。続けて、width: 210pxを指定すると、サブコンテンツ領域の幅が210ピクセルに固定される【4-1】。後続のメインコンテンツ（content）は、サブコンテンツの領域に回り込むが、この段階では2つの領域が接触してしまう。そこで、メインコンテンツに対してmargin: 0 0 0 230pxを指定する【4-2】。左側のマージンが230ピクセル分確保されるため、見た目、サブコンテンツと明確に分離される。


【4-1】

【4-2】

【4-1】【4-2】サブコンテンツにfloat: leftを指定し、width: 210pxで幅を210ピクセルに固定。後続のメインコンテンツに対しては、左側のマージン230ピクセルを指定する

サブコンテンツの幅が210ピクセル、メインコンテンツの左マージンが230ピクセルなので、2つの領域には20ピクセル分の間隔が確保されていることになる。floatプロパティを使用した場合、後続の要素に影響を与えてしまうため、機能を解除しておく必要がある。この場合は、段組み領域の後の要素にclear: leftを記述する。サンプルでは、XHTMLファイルに＜br class="floatClear" /＞を記述し、CSSで.floatClear {clear: left; display: block;}と指定して対応している【5-1】【5-2】。


【5-1】

【5-2】

【5-1】【5-2】後続の要素に影響を与えないように、後の要素（サンプルではbr要素）にclear: leftを記述してフロート処理の機能を解除する

対象とするブラウザで開き、作成したページを確認する。コンテンツ全体の幅を780ピクセルで固定しているため、ウィンドウを広げると左右に空白ができる【6-1】。逆に狭めるとコンテンツ領域の左右が隠れる。このような、サイズをピクセル値で固定するデザインをフィクスドレイアウト（Fixed Layout）と呼ぶ【6-2】。


【6-1】

【6-2】

【6-1】【6-2】ブラウザでページデザインをチェックする。フィクスドレイアウトは幅が固定されているため、左右に空きができる

ブラウザのテキストズーム（文字サイズの拡大縮小）、ページズーム（ページ全体の拡大縮小）も試しておく。テキストズームで文字サイズを大きくした場合、下方向にページが拡張されるが、ページズームでは全体が拡大される。ここでレイアウトが崩れてしまう場合は、フロート処理（float）やマージンの値指定、フロートの解除（clear）をチェックしてほしい【7-1】【7-2】。


【7-1】

【7-2】

【7-1】【7-2】ブラウザに標準搭載されているテキストズーム（左）とページズーム（右）の表示結果