Lesson 03 絶対配置で指定するグリッドカラムレイアウト - Webデザイン表現&技法の新・スタンダード・レイアウト編

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

Lesson 3

絶対配置で指定する グリッドカラムレイアウト

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

CSSには、ブラウザウィンドウ上のX、Y座標値で要素を配置することができるpositionプロパティが用意されている。グリッドフリーなレイアウトによく使われる手法だが、崩れにくいマルチカラムレイアウトにも応用できる。

段組みレイアウトを実現する方法として、 floatプロパティ（フロート処理）によるテクニックが最も普及している。フロートは、対象とする要素を浮動化し、後続の要素を左右どちらかに回り込ませることで段組みを表現するため、コラージュのような配置はできない。レイアウトの自由度を求める のならpositionプロパティによる相対配置、絶対配置が適している。フリーレイアウト も可能だが、ここではグリッドカラムレイアウトに応用してみよう。ヘッダ＋コンテ ンツ（サブコンテンツ＋メインコンテンツ）＋フッタで構成したサンプルで手順を示し ていきたい【1-1】【1-2】【1-3】。


【1-1】

【1-2】

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


【1-3】

最初に主要なタグのマージン、パディングをリセット（値をゼロに）しておく。相対配置、絶対配置を指定する場合、影響を受けそうな要素を一度リセットしておいたほうが作業しやすい場合がある。リセットの後に、フォントやマージンなど、基本的なスタイルを指定していく【2-1】【2-2】。


【2-1】CSSソース。主要なタグをリセット（マージン、パディングの値をゼロにする）しておく



【2-2】リセット直後（左）と基本的なスタイルを指定したあとの状態（右）

ここで採用するレイアウトのタイプは、幅をピクセル値で固定するフィクスドレイアウトである。コンテンツ全体（id名：building）に対して、width:860pxを指定して、幅を860ピクセルに固定する。ヘッダ＋コンテンツ（サブコンテンツ＋メインコンテンツ）＋フッタは、＜div id="building"＞〜＜/div＞でグループ化されている【3-1】【3-2】。


【3-1】コンテンツ全体（id名：building）の幅を860ピクセルに固定する


【3-2】

サブコンテンツとメインコンテンツの領域をグループ化している＜div id="contents"＞〜＜/div＞に対して、position:relativeを指定。relativeは相対配置のことで、ボックスの左上を座標の「基点」にできる。この場合は、サブコンテンツとメインコンテンツをグループ化したcontentsボックスの左上が基点になる【4-1】【4-2】。


【4-1】サブコンテンツとメインコンテンツを含有するcontentsボックスに対して、position:relativeを指定（ボックスの左上が基点になる）


【4-2】CSSソース

次はサブコンテンツ（id名：sub-content）に対して、position:absolute; top:0; left:0; width:300px;を指定する。absoluteは、絶対配置のことでX、Yの座標値を指定すると対象の要素を自由に配置することができる。top:0; left:0;の場合、contentsボックスの左上の基点に配置され、width:300pxで幅が300ピクセルに固定される【5-1】【5-2】。


【5-1】サブコンテンツ（id名：sub-content）に、position:absoluteと座標値、幅のピクセル値を指定し、親ボックスの基点にあわせて配置する


【5-2】CSSソース

ここまでのスタイル指定は、コンテンツ全体の幅が860ピクセルに固定、サブコンテンツとメインコンテンツをグループ化しているcontentsボックスは、position:relative;の指定で左上を座標の基点に設定。サブコンテンツ（id名：sub- content）にposition:absolute;と座標値を指定し、幅を300ピクセルに固定。この後、メインコンテンツに対して、左側のマージンを指定することで段組みを完成【6-1】。


【6-1】絶対配置を応用した2段組みレイアウトの構造（サブコンテンツは通常の配置から独立して表示されるため他の要素に影響を与えない）

メインコンテンツ（id名：main-content）には、margin:0 0 0 300pxを指定。左のマージンが300ピクセル確保され、結果的に2段組みのレイアウトが表現される。全体幅が860ピクセル、サブコンテンツ幅が300ピクセルに固定され、メインコンテンツの幅は560ピクセルになる【7-1】【7-2】。作成したページをブラウザで確認する。一見、floatプロパティによる2段組みと変わらないが、相対配置と絶対配置による強固なレイアウトになっている。ポイントは、親ボックスに設定される座標の基点である。要素の絶対配置は、基点で決まるので正しく理解しておこう【7-3】 。


【7-1】メインコンテンツに左マージンが指定されていない状態（サブコンテンツと重なっている）


【7-2】メインコンテンツ（id名：main-content）には、300ピクセルの左のマージンが指定されているため、結果的に2段組みが表現される


【7-3】左のサブコンテンツだけ（絶対配置によって）別のレイヤーに配置されているため、他の要素がどう変化しても影響を受けない仕組みになっている