Cssによるレイアウト
- 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をかけた要素の下に入り込ん
でいるが、中のテキスト・画像は入り込ま
ない。