HTML5&CSS3標準デザイン講座第二版のfloatで3カラムつくるというのを勉強しています。
floatを指定したときの、その要素のスタート位置の定義がわかりません。
#テキストのHTML・CSS
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>3カラムレイアウトサンプル</title> 6<link rel="stylesheet" href="style1.css" media="all"> 7</head> 8 9<body> 10<div id="wrap"> 11 <header id="header">ヘッダー領域<br>ヘッダー領域<br>ヘッダー領域</header> 12 <section id="cont1"> 13 <p>コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。</p> 14 <p>コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。</p> 15 <p>コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。コンテンツ1が入ります。</p> 16 <!-- /#cont1--></section> 17 <section id="cont2"> 18 <p>コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。</p> 19 <p>コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。</p> 20 <p>コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。コンテンツ2が入ります。</p> 21 <!-- /#cont2 --></section> 22 <section id="cont3"> 23 <p>コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。</p> 24 <p>コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。</p> 25 <p>コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。コンテンツ3が入ります。</p> 26 <!-- /#cont3 --></section> 27 <footer id="footer">フッター領域<br>フッター領域<br>フッター領域</footer> 28</div> 29</body> 30</html> 31
CSS
1 2@charset "UTF-8"; 3/* CSS Document */ 4 5*{ 6 margin:0; 7 padding:0; 8} 9 10#wrap { 11 width: :949px; 12 margin: 30px auto; 13 background-color: beige; 14} 15 16#header { 17 background-color: lightpink; 18} 19 20#cont1 { 21 background-color: palegreen; 22 width: 300px; 23} 24 25#cont2 { 26 background-color: skyblue; 27 width: 300px; 28} 29 30#cont3 { 31 background-color: plum; 32 width: 300px; 33} 34 35#footer { 36 background-color: gold; 37} 38
テキストでは、ここからコンテンツに順にCSSにfloat leftを付け加えていき、最後にfooterでclear bothとするように指示があります。
やっていくとこんな感じになります。
#テキスト3カラム完成形
css
1@charset "UTF-8"; 2/* CSS Document */ 3 4*{ 5 margin:0; 6 padding:0; 7} 8 9#wrap { 10 width: :949px; 11 margin: 30px auto; 12 background-color: beige; 13} 14 15#header { 16 background-color: lightpink; 17} 18 19#cont1 { 20 background-color: palegreen; 21 width: 300px; 22 float: left; 23} 24 25#cont2 { 26 background-color: skyblue; 27 width: 300px; 28 float: left; 29} 30 31#cont3 { 32 background-color: plum; 33 width: 300px; 34 float: left; 35} 36 37#footer { 38 background-color: gold; 39 clear: both; 40}
なるほどと思ったのですが、いろいろ試しているうちにfloatの動きがわからなくなりました。
#わからないこと
この一連の流れをやってみて、一カ所だけにfloatを指定したらどうなるのかやっていると、理解できない部分がでてきました。
##cont2(青)の部分だけにfloat leftした場合の動きについて
css
1@charset "UTF-8"; 2/* CSS Document */ 3 4*{ 5 margin:0; 6 padding:0; 7} 8 9#wrap { 10 width: :949px; 11 margin: 30px auto; 12 background-color: beige; 13} 14 15#header { 16 background-color: lightpink; 17} 18 19#cont1 { 20 background-color: palegreen; 21 width: 300px; 22} 23 24#cont2 { 25 background-color: skyblue; 26 width: 300px; 27 float: left; 28} 29 30#cont3 { 31 background-color: plum; 32 width: 300px; 33} 34 35#footer { 36 background-color: gold; 37}
私の予想では、レイヤーが一段あがりcont1の隣にcont2がつき、cont2が抜けた分、cont3とfooterが下の画像のように上へズレるとおもったのですがそうなりませんでした。floatを指定したときにレイヤーが一段上がった時のスタート位置の定義がわかりません。
つまり、floatを指定した時の、浮いた要素の稼働範囲がよくわかりません。float leftをすると、空きのある一番左上(cont1の横)がスタート位置だと思っていたのですが、cont2のみにfloat leftをした場合に変化がないのはなぜでしょうか。
回答1件
あなたの回答
tips
プレビュー