- ベストアンサー
floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは コンテンツの有する幅は width + (左右)margin + (左右)padding + (左右)border の総和になります floatを使用する場合、親の幅より子の総幅が多いときには下に追いやられてしまうので総幅を計算しながら作らないといけません 後こういったレイアウトの場合、1つ1つをfloatレイアウトするのでは難しい・・・というか無理？なので(positionレイアウトなら別ですが) まず、左、中央、右の大きいコンテンツを配置してそれからその中の詳細なレイアウトを決めていきます <style type="text/css"><!-- .container { text-align:left; width:760px; margin:auto; background-color:#FFFFFF; } .content1 { width:758px; height:200px; border:1px solid #999999; } .box1,.box2,.box3,.box4 { width:176px; border:1px solid #CCCCCC; margin-bottom:5px; } .box5,.box6 { width:216px; border:1px solid #CCCCCC; margin-bottom:5px; } .news,.topics { width:344px; height:200px; overflow:auto; border:1px solid #CCCCCC; margin-bottom:5px; } .left-contents,.center-contents,.right-contents { padding:5px 0px 5px 5px; float:left; } --></style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <!--左側--> <div class="left-contents"> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> </div> <!--中央--> <div class="center-contents"> <div class="news"> あ </div> <div class="topics"> い </div> </div> <!--右側--> <div class="right-contents"> <div class="box5"> う </div> <div class="box6"> え </div> </div> <div style="clear:both;"></div> </div>
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞このfloatは私が希望するレイアウトには必要なのでしょうか？ 必要というか一番核の部分です ＞スタイルシートのfloatはどういう働きをするのでしょうか？ floatの説明について探してみたのですが見つけきれないのでお手数ですがhtmlファルにしてブラウザでお読みください 説明が足りてるといいですが・・・・ <style type="text/css"><!-- p { margin:0px; } .base { width:800px; background-color:lavender; } .left { float:left; width:200px; background-color:aqua; } .right { float:right; width:200px; background-color:aqua; } .box1 { background-color:LightCyan; } .box2 { background-color:yellow; } .box3 { background-color:Mistyrose; } .box4 { background-color:Palegreen; } .box5 { background-color:Thistle; } .sbox { width:200px; } .mbox { width:400px; height:30px; } .lbox { width:600px; height:60px; } .mgn { margin:10px; } --></style> <div class="base"> <div class="left">float:left;すると左に配置される</div> <div style="clear:both;"></div> </div> <p> </p> <div class="base"> <div class="right">float:right;すると右に配置される</div> <div style="clear:both;"></div> </div> 表示からそのように認識されてるのだと思いますが <p> </p> <div class="base"> width:800px;の箱の中に <div class="box1 sbox">width:200px;の【box1】</div> <div class="box2 sbox">width:200px;の【box2】</div> <div class="box3 sbox">width:200px;の【box3】</div> の小箱が３つあったとして <p> </p> float:left;とは<br> <div class="box1 left">width:200px;の【box1】:left</div> <div class="box2 left">width:200px;の【box2】:left</div> <div class="box3 left">width:200px;の【box3】:left</div> <div style="clear:both;"></div> このように『左上』から敷き詰めていく <p> </p> float:right;とは<br> <div class="box1 right">width:200px;の【box1】:right</div> <div class="box2 right">width:200px;の【box2】:right</div> <div class="box3 right">width:200px;の【box3】:right</div> <div style="clear:both;"></div> このように『右上』から敷き詰めていく </div> とこのような挙動をします <p> </p> また、子要素の総幅が親要素の幅より小さければfloat順は順不同で <div class="base"> <div class="box1 left">【box1】1番目に配置</div> <div class="box2 right">【box2】2番目に配置</div> <div class="box3 left">【box3】3番目に配置</div> <div style="clear:both;"></div> という風にもできます<br> これを利用して<br> <div class="box1 left">【box1】1番目に配置</div> <div class="box2 right lbox">【box2】2番目に配置</div> <div class="box3 left">【box3】3番目に配置</div> <div class="box4 left">【box4】4番目に配置</div> <div style="clear:both;"></div> という風にfloatでレイアウトできます<br> #2で個別では無理といったのはfloat順やheightなどで頭を抱える事になるからです<br> 特に質問のように真ん中が一番高かったり、heightがバラバラだと<br> <div class="box1 left">【box1】1番目に配置</div> <div class="box2 right">【box2】2番目に配置</div> <div class="box3 right mbox">【box3】3番目に配置</div> <div class="box4 left">【box4】4番目に配置</div> <div class="box5 right">【box5】5番目に配置</div> <div style="clear:both;"></div> という風にどう順番を変えてもきれいにレイアウトはできないのです <p> </p> またfloatを使用する上で注意しなければいけないのは実質の高さを取れないことです <div class="base"> <div class="box1 mgn left">←↑【box1】下地が分かるようにmarginを取ってます</div> <div class="mbox box2">IEはバグで【box1】の右側に配置されますがFirefoxなどでは【box1】の表示の下から表示が始まります</div> </div> <div style="clear:both;"></div> <p> </p> このようなレイアウト崩れを防ぐ為に要所要所でfloat解除する癖を付けておいた方がいいかもしれませんね<br> float解除すると <div class="base"> <div class="base"> <div class="box1 mgn left">←↑【box1】下地が分かるようにmarginを取ってます</div> <div style="clear:both;"></div> <div class="mbox box2">このように【box1】の表示終わりから次のコンテンツが表示されます</div> </div>
お礼
返事が遅くなってしまいすみません。 丁寧に教えていただきありがとうございます。 floatを理解することができました。 floatは難しいですね。
- solLight
- ベストアンサー率47% (30/63)
以下のようにしたら出来ました。IE以外はレイアウトが崩れますが・・・ <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> div#container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF; padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} div#left {float:left;} div#wrapper {width:530px; float:left;} div#middle {clear: both; float:right;} div#right {clear: both; float:right;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:160px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px;border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div id="container"> <div class="content1"> 画像 </div> <div id="wrapper"> <div id="left"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> </div> <div id="middle"> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> </div> </div> <div id="right"> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </div> </body> </html> このサイトを参考にしてみてください。 http://www.geocities.jp/multi_column/practice/3column1.html
お礼
ご回答ありがとうございます。 すごく良いですが、IE以外は崩れてしまうのが難点ですね。 参考にしたいと思います。。
お礼
ご回答ありがとうございます。 なるほど、左・中央・右のコンテンツを先に作るのですね。 お尋ねしたいのですが、スタイルシートのfloatはどういう働きをするのでしょうか？ floatは指定した要素を左や右に配置する働きをしますよね？ そうすると今回の場合left-contentsとcenter-contentsとright-contentsにfloat:leftを指定した場合、どいうことが起こっているのでしょうか？ 今頭の中がぐちゃぐちゃになってます・・・。 このfloatは私が希望するレイアウトには必要なのでしょうか？