|   | ☜ | 1  2  3  4  5  6  7  8  9  10 | ☞ |

レイアウトの基本を理解する

２カラムレイアウトを実現する

２カラムレイアウト

A班ホームページの例

ページのレイアウトほどがやパソボラA班サイトのトップページは次の通りとなっています。

#header、#pagebody、#footer とで大きく３段組みになっており、これらは #container という全体を包含する div 要素に含まれています。

また #pagebody は #alpha、 #beta の２列（２カラム）で構成されております。

XHTMLソース

２カラムレイアウトを実現するCSSソース

ページトップへ

２カラムレイアウトを実現するポイント

１ 全体をセンタリングします。

横幅５２文字分をセンタリングするために、全体を囲っている #container に width : 52em ; と margin : 0 auto ; を指定します。

ヒントのアイコン

左右 margin プロパティに 「auto」 を指定するとセンタリングされます。（標準モード）

標準モードでは、ボックスの左右の margin プロパティに 「auto」 を指定するとセンタリングされます。互換モードでは、ボックスの左右の margin プロパティに 「auto」 を指定してもセンタリングされません。

２ float プロパティで回り込ませる

float プロパティの値に left 、あるいは right を指定した要素（フロートボックス）は通常の流し込みのルールから外されます。実際に浮いているわけではないが、浮いたような状態になっており、後続のボックスは、フロートボックスが存在していないのと同じように配置されます。後続がブロックボックスであった場合にはフロートボックスが無いものとして配置され、行ボックスであった場合にはテキストだけがフロートボックスとの重なりを避けるように回り込んでいきます。行ボックスに指定した背景画像やボーダーなどはすべてフロートボックスの下（裏）になります。

用語解説のアイコン

通常の流し込みルールとは

視覚整形モデルに基づいて要素の内容が配置されるルールが決められています。通常の場合、各ブロック要素はソース内に記述された順番どおり縦に並べられ、横に並ぶことはありません。

float を指定している要素同士が続く場合、通常左フロートは、包含ブロックに対して、まずできる限り上に、次にできる限り左に寄ろうとします。しかし同時に、「 フロート同士のマージン辺は交差しない 」 というルールもあるため、後に配置した左フロートは、先に配置した左フロートの右マージン辺と重ならないよう、その右側に位置することになり、隣接して表示されます。

今回の例では、#alpha は左に、#beta は右に float させているが、#beta にも left を指定しても問題はありません。

３ 親要素にも float を指定します。

CSSの仕様では、フロートボックスの親要素は、子要素の中身がないものとして計算されます。この仕様が Web ブラウザによって表示が違うことがあり、混乱してしまいます。そこで親要素にも float : left ; を指定することで、親要素の高さを確保し、子要素が親要素からはみ出さないようにする方法をとっております。

４ float している要素にはすべて width を指定します。

#alpha と #beta の部分を左右に並べるために、#alpha に float : left ; を指定し、#beta に float : right ; を指定しています。このときに、width で横幅を指定する必要があります。float を使用する場合は置換要素 ( img 要素など） 以外の横幅が決められていない要素に必ず width を指定するという決まりがあるからです。

ヒントのアイコン

float 要素での width の指定

置換要素（ img 要素など）の、横幅が決められている要素以外に float を指定する場合は、必ず width の値を auto 以外で指定しなければなりません。

５ フッタ部分の回り込みを防ぐ

ページの下部にあるフッタ領域が回り込んでしまうのを防ぐために、#footer に clear を指定して回り込みを解除します。この時に、#footer に上余白を確保するために margin-top プロパティで上余白を確保する方法はとらないようにします。

ヒントのアイコン

回り込みが解除される仕組みとその注意点

clear プロパティを指定すると、その要素に対して、先行するフロートボックスに重ならないように自動的に上余白が与えられます。この自動調整される余白をクリアランスと呼びます。例えば、フロートボックスの高さが 100px であったとすると、clear プロパティを指定したボックスには 100px 分のクリアランスが発生します。

そこで、clear プロパティを指定したボックスに margin-top プロパティなどで明示的に上方向のマージンを指定していた場合は、例えばmargin-top: 20px; を指定していたとすると、この場合フロートの高さ 100px に対する不足分である 80px のクリアランスが加えられるだけで、margin-top の値は反映されません。しかしまた、一部のブラウザには、回り込みを解除するための余白を確保した上で、さらに明示的に指定した上マージンを加えるものもあり、ブラウザによって表示に差が生まれてしまいます。

問題を未然に防ぐには、 clear プロパティを指定したボックスには上マージンを指定せず、上パディング padding-top で代替しておく、あるいはフロート自体に下マージン margin-bottom 下パディング padding-bottom を設けるといった工夫が必要になります。

ページトップへ

そのほかのポイント

６ コンテンツ全体を包含するdiv要素

XHTML には、コンテンツ全体を包含する要素として、id="container" という div 要素を設けています。マークアップの観点からすると、そもそもコンテンツ全体を包含する要素には body 要素があるため、こうした div 要素をわざわざ記述する理由は薄いと言えます。

一方CSSの観点からすると、本来、XHTMLのルート要素 （ 最上位の要素 ） は html 要素であり、CSSの初期包含ブロック （ キャンパスの左上を基準に固定された表示領域の大きさの矩形 ） も html 要素に対して生成されることになっています。そのため、html 要素に対してページ全体の背景色などを指定し、コンテンツの横幅などは、body 要素にしても良いことになります。

しかし、バージョンの古いブラウザでは、body 要素をルート要素のように扱い、初期包含ブロックも body 要素に対して生成してきました。その名残があり、現在もページ全体の背景色などは body 要素に対して、コンテンツの横幅などはその直下の div 要素に対して指定するという方法が一般的になっています。ここで、id="container" という div 要素を設けて記述しているのは、こうしたCSSの互換性の問題による理由からです。

ページトップへ

エラスティック・レイアウト

７ 横幅サイズを文字幅で指定する

横幅の広い画面でWebサイトを閲覧する場合、一行に含まれる文字数が多くなると非常に読みずらくなります。一般に、横組みの本文を閲覧するときに読みやすい文字数は約３５～４０文字と言われています。つまりそれ以上の文字数が一行に含まれると、読みずらくなります。これを避けるレイアウト手段としてエラスティック・レイアウトがあります。

エラスティックレイアウトでは em ( エム ) という単位を指定して、一行あたりに含まれる文字数を指定します。1em は１文字に相当し、例えば 40em と指定したボックスは、文字サイズを拡大・縮小しても常に１行４０文字を保ったままボックス幅が伸縮します。

この方法でWebページを作成すると、文字サイズを拡大・縮小したときにズームイン／ズームアウトのような効果になるので、アクセシビリティの高いレイアウト手法と言えます。IE7 や Firefox3 で実装されているページズーム機能のようなものです。

エラスティック・レイアウトには欠点もあります。文字のサイズに応じてレイアウトが決定されるため、文字のサイズを非常に大きな値にすると、水平方向のスクロールバーが表示されるようになってしまいます。また、文字のサイズが変更されたにもかかわらず画像のサイズが変更されないという問題もあります。

ページトップへ

|   | ☜ | 1  2  3  4  5  6  7  8  9  10 | ☞ |