ページレイアウトをデザインする

例えば、下の様なレイアウトのページを作るとします。
都合上、以下の説明はブラウザを下に表示するレイアウトが全て表示できるより広い幅で見てください。

このレイアウト例を表示するための注意点のまとめ、およびCSS・htmlの記述内容はこちら

前ページで説明した「floatの指定」に従えば、上のレイアウトには

1. 左右どちらかのブロックにfloatを指定する（下のどちらかの一つの指定をすればよい）
   • メニューのブロックにfloat: left;を指定
     または
   • 内容のブロックにfloat: right;を指定
2. 脚注のブロックにclear: both;を指定
   clear: right;でもいいのですが、bothだとleft、rightどちらも解除できるので今回はbothを利用します。

が必要です。* { margin: 0; padding: 0;}で基本の余白を0にしてあるので、ブロック間の隙間はできません。

• floatを指定する場合、同じ{ }内で必ずwidthも指定します。
• <p>タグにfloatやclearを指定するクラスをつけてもいいのですが、ここでは後の利便性を考え、内容の入るタグとfloatやclearを指定する指定するタグを分けます。
  →<div>タグにクラスを指定し、<div>タグの中に中身を記述した段落の<p>を入れることにします。
• floatの指定はleft、rightのどちらでも構わないのですが、メニューより本文を先に読み込ませる方が閲覧する人に親切なので、ブロックの並び順を本文→メニューとし、本文のブロックにfloat: right;を指定することにします。

#content {
float: right;
width: 400px;
}

#foot {
clear: both;
}

<p>１．タイトル（title）</p>
<div id="content"><p>３．内容（content、幅400ピクセル）</p></div>
<p>２．メニュー（menu）</p>
<div id="foot"><p>４．脚注など（foot）</p></div>

すると、こうなります。
（上の例では背景色の指定は省略しています。実際はcssで背景色を指定しなければ色はつきません。）

この例では、以下の点が問題となる可能性があります。

1. メニューのブロック（floatとwidthを指定していないブロック）の幅がブラウザの横幅次第で変わる
2. レイアウトの周囲に余白が無い

この状態ではメニューに幅を指定していないため、「ブラウザの幅−400ピクセル＝メニューの幅」になります。
表示されている幅が想定している幅よりも広ければ見た目以外の問題はそれ程大きくないのですが、ブラウザの幅が狭くなるとfloat指定したブロックの下に文字がはみ出していきます。
このページの幅を変えて上のレイアウトの表示を確認してみてください。

まず、横に並ぶブロックの全てに（ここではfloatを指定した内容のブロックだけでなくメニューのブロックにも）幅（width）を指定します。
これで、ブラウザに充分な幅があれば、floatで回り込んだブロックの幅も一定になります。
なお、widthを指定したブロックにborder、paddingを指定すると表示が乱れる可能性があります。枠線や余白が必要な場合は、widthを指定したブロックの中に枠線や余白用のブロックを入れてください。詳しくはこちら

ところが、floatで回り込ませた（floatを指定していない）ブロックにwidthを指定すると、綺麗に並びません。
下に例をあげます。
float: right;ではブラウザの幅によってブロック間に隙間ができるか、回り込ませたブロックに食い込み、
float: left;では回り込み自体が無視され、ブロックが上下に並びます。
もし下のレイアウトが綺麗に並んで表示されているならば、ブラウザのバグのせいです。他のブラウザで見ると表示がおかしくなります。
このページの幅を変えて上のレイアウトの表示を確認してみてください。

それだけでなく、ブラウザの幅が狭くなると回り込ませたブロックの幅も狭くなる、という現象も無くなりません。

上のwidth指定で発生した問題の解決策として、回り込ませるメニューのブロックにもfloatを指定します。

1. float: right;で回り込ませたブロックにはfloat: right;を、
2. float: left;で回り込ませたブロックにはfloat: left;を指定します。

これでfloat: right;でブロック間に隙間ができる問題と、float: left;でブロックの回り込みが無視されるという問題が解決しました。

ところが、ブラウザの幅が並べたブロックの幅よりも広い場合には右または左に余白ができ、上下に挟んでいるブロックとずれが生じます。
また、並んだブロックの幅よりもブラウザの幅が狭くなると、回り込みが解除され、ブロックが上下に並びます（カラム落ち）。
このページの幅を変えて上のレイアウトの表示を確認してみてください。

結局ブラウザの幅が閲覧者に依存することがレイアウトの崩れにつながっています。
もっとも、狭いブラウザで見なければならない人にとってはむしろ横スクロールせずに幅に合わせてカラム落ちする方が親切だ、ともいえます。
ブラウザの幅に依存せずレイアウト幅を確保するため、レイアウト全体をwidthを指定したブロックの中に入れます。
ここではレイアウトに必要な幅がメニュー200＋内容400なので、全体を囲うブロックの幅を600ピクセルとします。
また、上下に挟むブロックと横並びのブロックにずれが出ないよう、タイトルと脚注のブロックも全体を囲うブロックの中に入れてしまいます。
脚注にあたるブロックを表示しない（下のブロックに内容を入れない）場合でも、必ず回り込みを解除する空きブロックをレイアウト全体を囲うブロックの中に入れてください。
入れないと、floatを指定したブロックがレイアウト全体を囲うブロックからはみ出し、レイアウトが乱れます。

widthを％で指定している場合は横並びの合計が100%になるよう設定し、全体を囲うブロックのwidthを100%に指定します。

ここで問題になるのが、環境（ブラウザ）によって

1. widthの幅にborderとpadding分を含めていると解釈される場合
2. widthの幅にはborderとpadding分を含まれないと解釈される場合

の両方がある＝環境によってブロックのwidthが変わる、ということです。
レイアウト全体を囲うブロックのwidthは、レイアウトに利用するブロックのwidthの合計と同じにする必要があり、ずれがあるとレイアウトが崩れてしまいます。
環境によって全体のwidth指定を変えることはできないので、この問題を解決するためにはwidthを指定したブロックにはborderとpaddingを指定しないようにします。

もう一つの問題が、回り込みを解除するブロックは、表面的には余白が無いように見えても、自動的に上余白を調整している、ということです。
このため、clearと同じ{ }の中でtop-margin、または（上余白の指定を含む）marginを指定すると表示が乱れる場合があります。
このため、widthを指定したブロックと同様、clearを指定するブロックでも直接marginを指定するのではなく、その中に含むブロック、または外を囲うブロックで余白を指定します(後述)。

これでウィンドウ幅に影響されて崩れることのないレイアウトができました。

ブロック間の隙間をなくすために全ての余白を0にするため、* { margin: 0; padding: 0; }という指定をheadに追加しています。
（この指定の詳細はこちら）
これは全てのブロックの余白を0にするという指定なので、ブロック間の隙間が無くなる代わりにレイアウト全体に対する上下左右の余白も無くなり、上の例のように前の行との行間もなく、ブラウザの左端につくように配置されます。
そこで、レイアウト全体対する余白が欲しい場合は、崩れを防ぐためのレイアウト全体を囲うブロックに余白を指定することになります。

全体を囲うブロックの幅指定（600ピクセル)に加えて上下左右に30ピクセルの余白を指定し（ { width: 600px; margin: 30px; } ）
回り込み解除（clear: both;）を指定したブロックには文字が入らない場合の表示

上の例の場合、ブラウザの幅とは無関係にレイアウトが左から30ピクセルの位置に配置されるので、幅次第でレイアウトの位置が左寄りとなったり、中央寄りとなったりします。

対して、下の例のようにブラウザの幅がどの長さであろうとレイアウトをブラウザ中央に配置することもできます。

上の例のようにブラウザの幅に合わせてレイアウトを中央に持ってくるには、下の例のようにmargin: 30px;に代えて、

 { margin-left: auto; margin-right: auto; width: 600px; } 

というように、margin-left: auto;とmargin-right: auto;という2つの指定を全体を囲うブロックに追加します（widthも必ず指定すること）。
ただしIEの一部のバージョンではこの方法で上手く中央にレイアウトが配置されない可能性があります。その問題を解決するには、レイアウト全体を囲うブロックに文字の左揃え指定を追加し、さらに内容の中央揃えを指定した別ブロックで囲う必要があります。詳しくはこちらの「InternetExplorerで表示させる場合の問題点」を参照してください。

ブラウザ幅に依存しないレイアウトを作りには、以下の点に注意します。

1. 横一列に並べるブロックにはすべてfloatとwidthを指定する
2. 回り込み解除を指定したブロック（中身は空でもよい）を用意する
3. 回り込み解除ブロックを含めたレイアウト全体をwidthを指定したブロックで囲う
4. widthを指定した（レイアウトに利用する）ブロックにpaddingとborderは指定しない
5. clearを指定したブロックには（上の）marginを指定しない
   必要な場合はレイアウト全体を囲うブロックに指定するか、widthやclearを指定したブロックの中に余白や枠線を指定したブロックを入れる
6. レイアウト全体の余白は全体を囲うブロックに指定する

#container{
width: 600px;
margin: 30px; }

#menu {
float: right;
width: 200px;
}

#content {
float: right;
width: 400px;
}

#foot {
clear: both;
}

<div id="container">
  <p>１．タイトル（title）</p>
  <div id="content"><p>３．内容（content、幅400ピクセル）</p></div>
  <div id="menu"><p>２．メニュー（menu、幅200ピクセル）</p></div>
  <div id="foot"><p></p> </div>
</div>

説明に戻る

ここではブラウザ幅からの影響を防ぐ方法を説明しましたが、ブロックの内容量によってもレイアウトの乱れが生じます。

内容量とレイアウト表示の関係はこちら