通販サイトやニュースサイトを眺めていると
様々なコンテンツが横に並べて配置され、
それが複数あります。
今までこのブログの記事を書いてきた内容だけでは
左右にコンテンツを並べることができません。
今回、記事で触れるfloatプロパティを使用すると
横にコンテンツを並べることができます。
floatプロパティ
値
none 回り込みはしない デフォルト値
left 指定した要素を左に寄せて、
次の要素は右に回り込ませる。
right 指定した要素を右に寄せて、
次の要素は左に回り込ませる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
*{margin:0;padding:0;} #container{ width:640px; height:640px; background-color:#f0f0f0; margin:0 auto; } .box{ width:50px; height:50px; } .aqua{background-color:aqua;} .darkcyan{background-color:darkcyan;} .purple{background-color:purple;} .coral{background-color:coral;} .blue{background-color:blue;} .green{background-color:green;} .fleft{float:left;} .fright{float:right;} .clear{clear:both;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <div class="box aqua">1 </div> <div class="box darkcyan">2 </div> <div class="box purple fleft">3 </div> <div class="box coral fleft">4 </div> <div class="box blue fright">5 </div> <div class="box green clear">6 </div> <div class="box aqua fright">7 </div> <div class="box darkcyan fright">8 </div> <div class="box purple clear">9 </div> </div> </body> </html> |
上記の例を見て頂ければ分かりますが、左に寄せたいもの
その後にも左に寄せたいものにfloat:leftを適用しています。
float:left/rightの回り込みを解除する
clearプロパティ
floatプロパティを使うときに気を付けなければいけないことがあります。
float一度指定設定するとその後続の要素も回り込んでいます。
このclearプロパティでbothを設定すると、この回り込みを解除ができ
この回り込みの場所より下の位置にコンテンツを配置することができます。