その２

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

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

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

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

5. clear:both

6. ボックス定義とは
• box要素は「ボックス領域」というエリアを
持つ
⇒幅・高さ・マージン・余白・枠線・内容から成り
立つ
これからつくる！

7. floatとボックス領域
• floatでレイアウトをす
る際、ボックス領域
を考慮しないとレイ
アウトが崩れる
なんかつくる！
• たとえば、・・・
（具体例）

8. marginの相殺（いらない？）

9. IEのバグ（いらない？）