floatを使ったボックスの配置方法について学びます。
最初は2段組を想定して下記のスタイルをつけておきます。
0 配置サンプルファイル style.css
#menu2 { display:none; }
floatはpositionよりも柔軟なレイアウトを可能にします。配置サンプルでは、#footerは長いブロックの下に配置されるため、#footerが重なる問題は起きません。
また、floatはhtmlの記述順に左右されるため、html上で先に記述されているものを「先」、後に記述しているものを「後」と表記しています。
htmlの順序が先のブロックに左寄せをかけ、後のブロックに右寄せをかけます。両方に左寄せをかけてもかまいません。
floatを使う際にはwidthの指定を必ず行います(この例では、style.css上部に記述済み)。また、マージンは後で調整するように0にしておきます。両方とも左寄せで作る場合には、間にマージンを確保しないと隣接してしまいます。
1 配置サンプルファイル style.css
#menu {
float:left;
margin:0;
}
#contents {
float:right; /* またはleft。その場合は要マージン*/
margin:0;
}
この状態で、ブラウザの幅を変更し、配置がどのように変化するか確認してみましょう。
横に入るスペースがあれば、後に続く#footerも並んで配置されます。
横に並ぶスペースが確保できない場合には、下に配置されます。また、IEとFirefoxで#footerの表示位置が異なるのも注意が必要です。
このとき、#blockの背景色が無くなっていることに注目してください。floatをかけた物はstatic以外のpositionと同様に、親要素の内容物となりません。内容物の高さが無いため背景色が表示されないのです。
floatをかけたブロックが横に並ぶ幅を確保するために、#blockに幅を設定します。また、#blockにはmarginをつけて余白の調整をします。
2 配置サンプルファイル style.css
#block {
width:564px; /* 左右のブロックの間が10pxになるように幅設定 */
margin:10px;
}
IEでは#blockに幅をつけた段階で回り込みが解除されてしまい、#footerが#blockの下部に配置されます。
また、IE6,7には『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあるため、#blockの背景色が表示されています。
#footerが回りこみをしないように、回り込みの解除を行います。回り込みの解除には、下記の2つの方法があります。
IE6,7は:after擬似要素を正しくサポートしていないのでこの方法は使用できません。ただし、IE6,7は上記のバグで回り込みが解除されているので問題ないといえば問題ないです。
:after擬似要素は直後に要素を追加します。追加した要素にclearを設定し、回り込みを解除します。
3a 配置サンプルファイル style.css
#block:after {
content: "";
display: block;
clear: both; /* 左右の回り込みを解除 */
}
要素を追加していることで、#blockに高さが生じ、背景色が塗られます。
直後の#footerにclearを設定し、回り込みを解除します。
3b-1 配置サンプルファイル style.css
#footer {
clear:both; /* 左右の回り込みを解除 */
}
回り込みを解除したブロックの上マージンは無視されるのがCSSの仕様です。したがってそのままでは#footerが#blockとくっついてしまいます。
これを回避するために、#blockの内容物の最下部にmarginを指定します。
IEでは回り込みを解除したブロックの上マージンが無視されませんので、この修正をしなくても正しく表示されてしまいますが、ブラウザ互換のために修正します。
3b-2 配置サンプルファイル style.css
#block { width:564px; margin:10px;/* margin-bottom:0;*/
} #menu { float:left;margin:0 0 10px 0;
} #contents { float:right;margin:0 0 10px 0;
} #footer { clear:both;/* 回り込み解除 */
margin-top:0;
/* 回り込み解除したら上余白は0 */
}
コメント(/* */)されている#blockの下マージンは、本来コメントを外すべき箇所なのですが、IEでマージンが表示されなくなってしまう場合にはコメントにします。後述の左右入れ替えではコメントを外します。FireFoxではどちらでも同じ表示になります。
#blockに幅設定を行った場合には、ページの幅設定を行うのが良いでしょう。さらに中央寄せにするのも一つのやり方です。
4 配置サンプルファイル style.css
#page {
width:584px;
margin:10px auto; /* 中央寄せ */
}
floatの場合には、回り込みの左右指定を変えるだけで左右入れ替えができます。
5 配置サンプルファイル style.css
#menu { float:right
; } #contents { float:left
; }
#footerに回り込み解除をしていてIEで下マージンが増えてしまう場合には、 #blockの下マージンを外します。
6 配置サンプルファイル style.css
div.container {
width:564px;
margin:10px;
margin-bottom:0;
}
3段組の場合には、左右のブロックを左右に寄せるだけで良いように思えますが、中央のブロックも左に寄せる必要があります。 全てを左寄せにしても構いません。
7 配置サンプルファイル style.css
#page { width:746px
; margin:10px auto; } #block { width:726px
; margin:10px; } #menu { float:left
; margin:0; } #contents { float:left
; margin:0;margin-left:10px
; }#menu2 { float:right; margin:0; }
#block:after { content: ""; display: block; clear: both;/* 左右の回り込みを解除 */
}
#footerに回り込み解除した場合は、2段組の際と同じく、IEでは下マージンが正しく表示されない場合があるため、コメント行で調整します。
3段組での配置を入れ替えるには注意が必要です。floatはhtmlクを中央に持ってくる#contents, #menu, #menu2のような順番を実現することはできません。下記のような方法で実現することができます。
配置サンプルファイルで左から順に#menu, #menu2, #contentsの3段組を作成せよ。
配置サンプルファイルで左から順に#contents, #menu, #menu2, の3段組を作成せよ。#menuは絶対配置を使うこと。
Programming Laboratory (Shio seminar)