Lesson 04 ウィンドウの幅にあわせて可変するリキッドレイアウト - Webデザイン表現&技法の新・スタンダード・レイアウト編

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

Lesson 4

ウィンドウの幅にあわせて 可変するリキッドレイアウト

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

リキッドレイアウト（Liquid Layout）は、ページの幅をピクセル値などで固定せず、ウィンドウの幅にあわせてテキストや画像を柔軟に再レイアウトする仕組みだ。

リキッドレイアウトは、ウィンドウの大きさにあわせてページの構成要素を再レイアウトする仕組みである。まず、2段組みのリキッドレイアウトを作成する手法について解説しよう。ヘッダ＋コンテンツ（サブコンテンツ＋メインコンテンツ）＋フッタで構成したサンプルで手順を示してい く【1-1】【1-2】【1-3】。


【1-1】


【1-2】


【1-3】サンプルの構成は、ヘッダ＋コンテンツ（サブコンテンツ＋メインコンテンツ）＋フッタ

最初に、ページ内のコンテンツ全体の幅を%で指定する。80%と指定すれば、ブラウザのウィンドウが変化しても常にウ ィンドウ幅の80%の領域が確保される。次にサブコンテンツの幅を指定して、 floatプロパティで浮動化する。メインコンテンツがサブコンテンツと重なってしまうが、（メインコンテンツの）左マージンをサブコンテンツの幅より若干大きい数値にしておくと、2段組みが表現できる【2-1】【2-2】。


【2-1】

【2-2】

【2-1】【2-2】コンテンツ全体の幅を80%、サブコンテンツの幅を25%（さらにfloatの指定）、メインコンテンツの左マージンを28%にする

具体的には、サブコンテンツ（id 名：leftColumn）にwidth:25%を指定し、全体の幅の25%をサブコンテンツに割り当てる。さらに、float: leftを指定し、メインコンテンツ（id名：contents）を右に動かす。ただし、この段階ではまだサブコンテンツとメインコンテンツは一部重なって 表示されている。メインコンテンツに対して、margin: 0 0 0 28%を指定すると、左 側のマージンが全体の28%分とられ、2段組みが完成する【3-1】【3-2】。


【3-1】


【3-2】

【3-1】【3-2】サブコンテンツ（#leftColumn）とメインコンテンツ（#content）のCSSソース

サブコンテンツに適用したフロート（float:left）をクリアしないと、後続の要素に影響を与えてしまうため、.floatClear{clear: left; display: block;}を指定しておく【4-1】【4-2】。XHTMLファイル内では、メインコンテンツの行の後に、＜brclass="floatClear" /＞を記述しておけば、フロート処理が解除される（br要素を使う のが最も簡単な方法だが、あくまで一例）。作成したWebページをブラウザで開いて チェックする。ウィンドウを広げると、コ ンテンツ全体も連動して幅が拡張される。 コンテンツ全体の幅を80%にしているの で、常にウィンドウ幅の80%で表示されている【4-3】【4-4】。サイズをピクセル値で指定した固定幅のレイアウトは、左右に大きな空白ができ、ウィンドウを狭めるとコンテンツの左右が隠れてしまう。


【4-1】


【4-2】

【4-1】【4-2】フロート処理を解除するための記述（ここでは、br要素を使用）


【4-3】


【4-4】

【4-3】【4-4】サンプルのブラウザ表示。ウィンドウの可変に対応してコンテンツの幅も調整される

3段組みレイアウトの場合も、基本的には同様の考え方で指定できる。ページの構 成は、ヘッダ＋コンテンツ（左のサブコン テンツ＋右のサブコンテンツ＋メインコ ンテンツ）＋フッタとなる。2段組みとの違いはコンテンツ領域のみ。左側のサブコンテンツと右側のサブコンテンツに、それぞれfloat プロパティを指定して左右に寄せ、メインコンテンツの左右マージンを指定すれば、3段組みが表現でる【5-1】【5-2】【5-3】。


【5-1】


【5-2】


【5-3】

【5-1】【5-2】【5-3】3段組みの場合は、ヘッダ＋コンテンツ（左のサブコンテンツ＋右のサブコンテンツ＋メインコンテンツ）＋フッタで構成する

左右のサブコンテンツ（id名：leftColumn、rightColumn）にそれぞれwidth: 20%;を、メインコンテンツ（id名：content）にmargin: 0 22%（マージンの上下はゼロ、左右は22%）を指定すれば、3段組みが完成する【6-1】。フロート処理の解除は2段組みと同じだ。Webページをブラウザでプレビューするとブラウザのウィンドウをどう変化させても、コンテンツ領域は左側 20%、右側20%、中央のメインコンテンツ56%の幅が保たれるので、レイアウトが崩れることはない【6-2】【6-3】。


【6-1】左から、左側のサブコンテンツ（#leftColumn）、右側のサブコンテンツ（#rightColumn）、メインコンテンツ（#content）のCSS ソース


【6-2】


【6-3】

【6-2】【6-3】フロート処理を解除するための記述とブラウザによるプレビュー