ボックスなどを横並びで表示させたいときは、いろいろな方法がありますが、今回はCSSのfloatプロパティを使用します。今回は、下記の基本的な例を紹介します。
HTMLのleftとrightのクラスに「float: left;」を追加すると、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.main { padding: 10px; width: 1000px; background: #aaa; } .left { float: left;/*これを追加*/ width: 600px; height: 200px; background: #6FB0CC; } .right { float: left;/*これを追加*/ width: 300px; height: 200px; background: #ABD16C; } |
leftの右隣にrightが並びます。しかし、親の背景(class=”main”)が細長くなってしまいます(表示されない)
親の背景(class=”main”)が表示されない理由は、floatプロパティを指定しているボックスが浮いて、親のボックスが高さを認識できなくなり、その結果、高さによって描写領域が決まる背景が表示されないという状態になります。
ボックスやリストを横並びにしたいときに使うのがfloatプロパティです。
これは便利な反面、
- 親ボックスからはみ出る
- 親ボックスの背景画像が表示されなくなる
などの問題が起きてしまうことがあります。 そういった場合はfloatを解除してあげれば良いのです。解除には3つの方法が存在します。
- 【その1】overflowプロパティ
- 【その2】clear:bothプロパティ
- 【その3】clearfix
それでは、上記3つを順番に説明していきます。
【その1】overflowプロパティ
mainのクラスに「overflow: hidden;」を追加する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.main { padding: 10px; width: 1000px; background: #aaa; overflow: hidden;/*これを追加*/ } .left { float: left; width: 600px; height: 200px; background: #6FB0CC; } .right { float: left; width: 300px; height: 200px; background: #ABD16C; } |
overflowプロパティを使うと、親要素はfloatプロパティによって浮いた子要素(leftやright)の高さを認識することができるようになります。なお、hiddenではなくautoやscrollでも効果は同じなのですが、ブラウザによってはスクロールバーが出てしまったりするので、hiddenをおすすめします。
overflow は、領域内に収まりきらない内容を、どのように処理するかを指定するプロパティです。
スタイルシート[CSS]/ボックス/ボックスからはみ出た部分の表示方法を指定する – TAG index Webサイト
これの短所
Firefox2などの一部のブラウザでは、印刷時にfloatした部分が消えてしまう場合がある。ネスケでは親要素自体が消えてしまう古いブラウザを考えなければ、短い記述で良いので大変便利です。
【その2】clear:bothプロパティ
HTMLは、divタグを追加し、「underクラス」を追加する。
1 2 3 4 5 |
<div class="main"> <div class="left">left</div> <div class="right">right</div> <div class="under">under</div><!-- これを追加 --> </div> |
CSSは、「.under」ルールを追加
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 |
.main { padding: 10px; width: 1000px; background: #aaa; overflow: hidden; } .left { float: left; width: 600px; height: 200px; background: #6FB0CC; } .right { float: left; width: 300px; height: 200px; background: #ABD16C; } /*これを追加*/ .under { clear: both; } |
clear:bothプロパティを使うと、親要素はclear:bothプロパティが適用されたdiv要素まで高さを拡張してくれます。
これの短所
タグをclear:bothだけのためにつくる事になってしまう
デザインを目的としただけのタグを入れることはあまり好ましくありません。もともとclear:bothはブロック要素でしか使うべきではない値なので、これも使うべきではないでしょう。ブロックの下に別のブロック要素を置ける状況であれば美しくfloatを解除できます。
【その3】clearfix
まず、これを書く。
1 2 3 4 5 |
<div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div>under</div><!-- これを追加 --> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.main { padding: 10px; width: 1000px; background: #aaa; } .left { float: left; width: 600px; height: 200px; background: #6FB0CC; } .right { float: left; width: 300px; height: 200px; background: #ABD16C; } |
clear:bothプロパティを使うと親要素はclear:bothプロパティが適用されたdiv要素まで高さを拡張してくれます。
HTMLはそのまま
1 2 3 4 |
<div class="main"> <div class="left">left</div> <div class="right">right</div> </div> |
CSSは一番下のルールを追加
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 |
.main { padding: 10px; width: 1000px; background: #aaa; } .left { float: left; width: 600px; height: 200px; background: #6FB0CC; } .right { float: left; width: 300px; height: 200px; background: #ABD16C; } /*これを追加*/ .main:after { content: ''; display: table; clear: both; } |
clear:bothプロパティを使うと親要素はclear:bothプロパティが適用されたdiv要素まで高さを拡張してくれます。
これの長所
すべてスタイルシートで処理するので、HTMLの文章構造を損なうことなく設定することができる(HTMLに余計なタグを増やさなくてすむ)
やや古いブラウザ(ネスケ)にも対応できる
以上です。