1. CSSレイアウト
（float,padding,margin,borderとは）
～ただいま編集中～
未完成！！

2. floatとは
• CSSでレイアウトをする
ときに使う #header
• 一般的には「回り込み」 #global_navi
をさせるプロパティだと
言われているが、本来
「浮く，浮かぶ」という
意味。 #contents
• floatを使うと、
• そのままでは、右図のよ
うに縦に並ぶブロック要
素を・・・ #info
• こんな感じで回り込ませ
られる！

3. floatのイメージ
• たとえば、#contentsに
float:leftをかける #header
と・・・
#global_navi
• #contentsが浮かんでい
る状態になるので、
• 後続の要素である#info #contents
はその下に入り込んで float:left
しまう
（注：画像・テキストは入り込ま
ない）
• #infoを#contentsの右側
に回り込ませるには、 #info
• #infoにもfloatをかける
（つづきは次のスライド）

4. left? right?
• #infoにfloatをかけると、
浮いてる要素同士は重な #header
らなくなる
• float:leftの場合、できる限 #global_navi
り左に寄ろうとするので、
#contentsの右側に左詰め
で回り込む #contents 右 左
float:left
• float:rightの場合、できる
限り右に寄ろうとするの
で、#contentsの右側に右
詰めで回り込む
• どう配置したいのかに box 4
#info
よって指定する値が変わ float:right
float:left
る！

5. CSSコードと動き
#header{
width:800px;
#header
}
#global_navi{ #global_navi
width:800px;
}
#contents 右 左
#content{ float:left
width:380px;
float:left;
}
#info{
width:380px; #info
float:left; float:right
float:left
float:right;
}
（↑floatをかける要素には必ずwidthを指定す
る）

6. 回り込みの解除
• #contentsと#infoにfloat:leftを
かけると、
#header
• 後続の要素である#footerが
浮いている要素の下に入り
込んでしまう #global_navi
• もし、#footer内にテキスト テキ
や画像が含まれていた場合 スト
は右図のようになる #contents #info テキ
スト
（#footer自体はfloatがかかっている float:left float:left テキ
スト
要素の下に入り込むが、テキスト テキ
は回り込むように表示される スト
↓なので・・・ テキストテキストテキストテキストテキスト
#footer
テキストテキストテキストテキストテキスト
ブロック要素の背景色がページの テキストテキストテキストテキストテキスト
背景と同じ色の場合はテキストだ
けが回り込んでいるように見え
る）
• この状態（回り込み）を解
除するには、clear属性を指
定する

7. clear:both
• floatをかけた要素の下に
#header
入り込んでしまった
#footerにclear:bothをか
#global_navi
けると・・・
#footer｛ #footer
テキ
clear:both clear:both
スト
テキ
｝ #contents スト
#info
float:left float:left
テキ
• 潜り込まなくなるので、 スト
本来の表示位置に戻る テキ
スト
（#footerの中身がテキスト テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
だった場合も右図のように テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
なる） テキストテキストテキストテキスト
• floatをかけた要素の後続 clear:both
の要素には、必ず
clear:bothをかけて回り
込みを解除する必要があ

8. ボックス定義とは
• ブロック要素は「ボックス領 （例）#box1{
width:600px;
域」というエリアを持つ height:150px;
⇒幅・高さ・マージン・余白・枠 padding:10px;
線・内容から成り立つ border:3px;
margin:20px;
• CSSコードと各領域の関係 }
は・・・
余白（padding）
枠線（border） 内容
（テキストや画像など、ブロック要素内
の
高さ（height）
要素が表示される領域）
幅（width）
マージン（margin）
box1のボックス領域は、幅666px（w600＋p10×2＋b3×2＋m20×2）
高さ216px（w150＋p10×2＋b3×2＋m20×2）とな
る 内容
⇒ padding,margin,borderの幅を考慮しないとレイアウトが崩れる！

9. floatとボックス領域
800px
• floatでレイアウトをする際、
ボックス領域（width,height #header
+padding,margin,borderの
幅）を考慮しないとレイア
ウトが崩れる #global_navi
• たとえばwidth:800pxの
#containerの中に、
800px－
• width:400pxの#contentsと #contents #info
（400px＋
float:left float:left
10px×2）＝
#infoがあって、 380px
#container
• #contentsにpadding:10pxを
かけると･･･
• ボックス領域が10px×2広が 400px 400px
るので、#infoが#containerの
幅に収まりきらず、レイア
ウトが崩れる（カラム落
ち）
⇒この場合は、#contentsか#info

10. IE6のバグ（おまけ）
枠線
• Internet Explorer6には、致命的な （border）
余白（padding）
CSSの解釈の不具合が満載
内容
↓たとえば・・・ 本来のwidth,height
• ボックス要素のwidth,heightに
paddingやborderの値も含めてしま
う
（対処法） IE6のwidth,heightの解釈
– widthとpadding,borderを一緒に指
定しない
– divを追加し外にボックスをつ ・margin-left:10pxを指定した場合
くってそこにwidthを指定し、内
側のボックス要素にpaddingを指
定する・・・etc.
float:left ←正しいブラウザの解釈
• floatと同じ方向（leftまたはright） 10px
にmarginの指定をすると、指定し
た値の倍の幅になってしまう
（対処法）
– marginではなくpaddingで指定する float:left ←IE6の解釈
20px
– marginが倍化したボックス要素に
display:inlineを指定する・・・etc.
⇒今までIE6だけのエラーに対応す

11. IE6のシェア
• 欧米ではすでに1%を切った。日本でも2011
年12月時点で5.9%と減少傾向
• そのサイトのターゲット層にもよるが、先ほ
どのスライドのような対策は今後必要なく
なっていくと考えられる
• The Internet Explorer 6 Countdownのサイトで
各国のIE6使用状況が確認できる
http://www.ie6countdown.com/
• アクセス解析ツール（Google analytics等）を
使用し、サイトの訪問者の使用ブラウザを把
握して、いつまで対応するか判断していくこ
とも重要

12. おまけ（実験結果）
#box1{
width:180px;
background-color:#f00;
float:left;
}
これが・・・ #box2{
width:180px;
background-color:#0f0;
}
#box3{
width:180px;
background-color:#00f;
}
こうなる！ #box4{
width:540px;
background-color:#ff0;
}
IE8・9とFirefoxはほぼ同じような結果。
box自体はfloatをかけた要素の下に入り込ん
でいるが、中のテキスト・画像は入り込ま
ない。

13. おまけ（実験結果）
#box1{
width:180px;
background-color:#f00;
float:left;
}
#box2{
width:180px;
background-color:#0f0;
float:left;
}
#box3{
width:180px;
background-color:#00f;
}
#box4{
width:540px;
background-color:#ff0;
}
IE8・9とFirefoxはほぼ同じような結果。
box自体はfloatをかけた要素の下に入り込ん
でいるが、中のテキスト・画像は入り込ま
ない。

14. おまけ（実験結果）
#box1{
width:180px;
background-color:#f00;
float:left;
}
#box2{
width:180px;
background-color:#0f0;
float:left;
}
#box3{
width:180px;
background-color:#00f;
float:left;
}
#box4{
width:540px;
background-color:#ff0;
}
IE8・9とFirefoxはほぼ同じような結果。
box自体はfloatをかけた要素の下に入り込ん
でいるが、中のテキスト・画像は入り込ま
ない。