Step7　レイアウト

今回は「レイアウト」の作業です。ヘッダとフッタの間に配置されているコンテンツ領域には、メインコンテンツとサブコンテンツがあります。この2つのボックスを左右に配置して、段組みを表現します。2カラムレイアウトを実現する手法のなかでも、最も簡単でシンプルな作業です。まずは、段組みの初歩的なテクニックからマスターしていきましょう。

まずレイアウトの構造について理解しておきましょう。採用するフォーマットは、固定幅の「ヘッダ＋コンテンツ（メインコンテンツ＋サブコンテンツ）＋フッタ」（2カラムレイアウト）ですが、段組みを表現する方法はさまざまです。

このサンプルでは、サブコンテンツ「rightColumn」をフロート（float: right）の指定で浮動化し、右側に寄せます。つまり、右カラムとして配置するわけです。そして、メインコンテンツ「content」には右マージン（右カラムの横幅＋余白分の値）を指定して、2段組みを表現します。最後にコンテンツ領域の最下部、もしくはフッタ領域でフロートをクリア（clear: right）して完成です【図1】。

それでは、CSSを記述していきましょう。サブコンテンツ「rightColumn」に対して「float: right;」を指定すると浮動化され、宙に浮いた状態になって右に寄ります。次に「width: 210px;」を指定して右カラムの幅を210ピクセルに固定します。さらに、段組みの境界線として「border-left: solid 1px #666;」を指定し、幅1ピクセルのボーダー（実線）を右カラムの左側に表示させます。

●XHTMLソース（簡略）
＜div id="outerGroup"＞
＜div id="header"＞ヘッダの領域＜/div＞
＜div id="contentGroup"＞
＜div id="rightColumn"＞サブコンテンツの領域＜/div＞
＜div id="content"＞メインコンテンツの領域＜/div＞
＜/div＞
＜div id="footer"＞コピーライトの領域＜/div＞
＜/div＞

●CSSソース
#outerGroup #contentGroup #rightColumn {
border-left: solid 1px #666;
float: right;
margin:0;
padding: 10px;
width: 210px;
}

左右のカラムが同じ高さになっているので、ここでテキストの量を増やしてレイアウトの変化を確認しておきます。メインコンテンツ（左カラム）のテキスト量を増やすと、右カラムの周辺に回り込んでいる状態がわかります【図3】。

カラーチェックも実行します【図4】。XHTMLでは上から、ヘッダ（青）、サブコンテンツ（赤）、メインコンテンツ（黄）、フッタ（白）の順に記述されていますが、このサンプルで採用している段組みの手法は「記述順」がとても重要となります。たとえば、サブコンテンツの上にメインコンテンツが記述されていると、同様の方法では段組みを表現できません。

メインコンテンツ（左カラム）は、フロートではなくマージン（margin）を使います。「content」に対して「margin: 0 230px 0 0;」を指定すると、左マージンが230ピクセルとられて、段組みが表現されます。

230ピクセルというのは、右カラムの幅210ピクセルと左右の余白（pading）20ピクセルを足した値です。左カラムの幅は指定されていませんが、コンテンツ全体の幅800ピクセルから230ピクセルを引いた値670ピクセルになります。
※右カラムの左側には1ピクセルのボーダーが指定されていますので、正確な幅は「231ピクセル」です。

●XHTMLソース（簡略）
＜div id="outerGroup"＞
＜div id="header"＞ヘッダの領域＜/div＞
＜div id="contentGroup"＞
＜div id="rightColumn"＞サブコンテンツの領域＜/div＞
＜div id="content"＞メインコンテンツの領域＜/div＞
＜/div＞
＜div id="footer"＞コピーライトの領域＜/div＞
＜/div＞

●CSSソース
#outerGroup #contentGroup #content {
margin: 0 230px 0 0;
padding: 10px;
}

ページの最下部に配置されるフッタの領域は、「background-color: #07e;」（背景色）、「color: #fff;」（文字色）、「border-top: solid 1px #05c;」（上のボーダー）、「text-align: center;」（テキストの中央揃え）、「padding: 10px;」（内側の余白）を指定して、基本デザインを完成させます。

また、address要素でマークアップされているため、デフォルトではイタリック表示になりますので「font-style:normal;」を指定して、正体に変更しています【図6】。

●XHTMLソース（簡略）
＜div id="outerGroup"＞
＜div id="header"＞ヘッダの領域＜/div＞
＜div id="contentGroup"＞
＜div id="rightColumn"＞サブコンテンツの領域＜/div＞
＜div id="content"＞メインコンテンツの領域＜/div＞
＜/div＞
＜div id="footer"＞＜address＞コピーライトの領域＜/address＞＜/div＞
＜/div＞

●CSSソース
#outerGroup #footer {
background-color: #07e;
color: #fff;
border-top: solid 1px #05c;
text-align: center;
margin:0;
padding: 10px;
}

#outerGroup #footer address {
font-style:normal;
}

さて、ここで段組みレイアウトの検証をしておきましょう。情報量の増減によって、レイアウトが崩れてしまったり、テキストが重なってしまうなど、予期せぬトラブルが発生する場合があります。段組みの場合は、特に注意しなければなりません。現在、左カラムの高さが右カラムより大きくなっていますが、逆に右カラムの高さが大きくなるとレイアウトに影響を与えるのでしょうか？

結果は一目瞭然です【図7-a】、【図7-b】。テキストがボックスから溢れてしまいました。Firefox、Internet Explorer 7、Operaなど、主要なブラウザで同様の結果となりました。

テキストが溢れてしまった原因は、フロートをクリアしていなかったからです。右カラムに「float: right」を指定しましたが、どこかでクリア「clear: right」しなければ、レイアウトに影響が出てしまうのです。どこでクリアするのか確認しておきましょう。このサンプルで使用できる2つの方法を紹介します。

・段組み（左右カラム）の下に新たな要素（br要素やp要素、hr要素など）を追加して、「clear: right」を指定する
・フッタ領域に対して、「clear: right」を指定する

●XHTMLソース（簡略）
＜div id="outerGroup"＞
＜div id="header"＞ヘッダの領域＜/div＞
＜div id="contentGroup"＞
＜div id="rightColumn"＞サブコンテンツの領域＜/div＞
＜div id="content"＞メインコンテンツの領域＜/div＞
＜/div＞
＜br class="floatClear" /＞
＜div id="footer"＞コピーライトの領域＜/div＞
＜/div＞

●CSSソース
#outerGroup #contentGroup .floatClear {
clear: right;
display: block;
}

●XHTMLソース（簡略）
＜div id="outerGroup"＞
＜div id="header"＞ヘッダの領域＜/div＞
＜div id="contentGroup"＞
＜div id="rightColumn"＞サブコンテンツの領域＜/div＞
＜div id="content"＞メインコンテンツの領域＜/div＞
＜/div＞
＜div id="footer"＞コピーライトの領域＜/div＞
＜/div＞

●CSSソース
#outerGroup #footer {
clear: right;
}

XHTMLファイルに余計なタグを記述するのは、あまりよいことではないためフッタ領域でクリアする方法が推奨されます。ただし、レイアウト構造によっては、フッタ領域に指定できない場合もあります。どちらの方法でも採用できるように知識だけは持っていた方がよいでしょう。

第6回のまとめです。

・プロセス1：右カラムの指定
サブコンテンツ「rightColumn」にフロートや幅、左のボーダーを指定
・プロセス2：左カラムの指定
メインコンテンツ「content」に左マージンを指定
・プロセス3：フッタ領域の基本デザイン
フッタ領域「footer」にカラーや上のボーダー、行揃えなどを指定
・プロセス4：段組みレイアウトの検証
ボックスの情報量を増減させてレイアウトの変化をみる
・プロセス5：フロートをクリアする
コンテンツ領域の最下部、もしくはフッタ領域でフロートをクリア

今回のポイントは、ページの情報量とレイアウトの変化です。デザインが複雑になるほど、発生したトラブルの原因を探すのが難しくなってきます。基本デザインの段階から、適度にチェックして問題をクリアしていくことをお奨めします。

次回は、ページの詳細なデザインを決めていく作業です。スタイル指定と検証を繰り返しながら、ブラウザの解釈やバグなどに対処するテクニックなども解説していきます。