CSS floatで要素を綺麗に整列させる２つのポイント
こんにちは、koheiです。
Webサイトを作る時、HTML,CSSで実装していきますが、初心者で一番躓くのが要素を横に並べたい時に使うfloatプロパティではないでしょうか？
僕も最初floatがさっぱり分かりませんでした。でもfloatを理解すると、一気に実装スキルが上がります！
ということで、今日はfloatで要素を綺麗に整列させる２つのポイントをご紹介します。
目次
floatプロパティの基本コード
まずは、単純に画面の中央にdiv要素のboxを３つ横に並べてみましょう。
HTML、CSSは以下のように記載します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="main_box"> <div id="box1"> box1 </div> <div id="box2"> box2 </div> <div id="box3"> box3 </div> </div> |
|
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 34 |
#main_box { width: 900px; margin: 0 auto; } #box1 { width: 250px; height: 250px; background-color: #87CEFA; float: left; } #box2 { width: 250px; height: 250px; margin-left: 75px; margin-right: 75px; background-color: #FFC0CB; float: left; } #box3 { width: 250px; height: 250px; background-color: #FAEBD7; float: left; } /* クリアーフィックス （回り込みの影響を解除する） */ #main_box::after { content: ""; /* 空のコンテンツを作成 */ display: block; /* 空のコンテンツをブロックボックスにする */ clear: both; /* 回り込みの解除 */ } |
・整列させたい3つのボックス（box1,box2,box3）にfloat:leftを指定することで回り込みを行っています。(CSSコード：10行目、19行目、26行目）
・３つのボックスの親要素（main_box)を中央揃えにするため、margin: 0 auto;を指定しています。（CSSコード：3行目）
・回り込みを解除するため、main_boxのafter疑似要素にクリアーフィックスを指定しています。（CSSコード：29行目〜34行目）
それではfloatで整列させるための具体的なポイントを説明していきます。
ポイント１：親要素の横幅を超えないように！
３つのボックスの親要素（main_box）の横幅は、900pxです。
３つのボックスを綺麗に整列させるには、この900pxを超えないように3つのボックスの横幅、マージンを設定していきます。
３つのボックスの横幅は250px、真ん中のボックス（box2)の左右マージンを75pxに設定しています。
従って、３つのボックスの横幅とマージンの合計が900pxとなり、親要素（main_box)の横幅と一致します。これで綺麗に均等にボックスを整列させることができます。
整列させる要素の横幅、マージンの合計が親要素の横幅を超えてしまった場合は、以下のようにレイアウトが崩れていまいます。
ポイント２：floatの解除を忘れないこと！
２つ目のポイントはfloatの解除を忘れないようにしてください。
floatの解除方法は、floatを指定した要素の後にクリアーフィックスを指定します。今回の例では、CSSのコード29行目〜34行目の部分です。
floatの解除を忘れると、以下のように回り込みが解除されずに、レイアウトが崩れてしまいます。
【紹介】2カラム〜4カラム整列対応のCSSテンプレート
最後に、2カラム〜４カラムで要素を整列させたい時に使えるCSSを紹介します。
■2カラム〜4カラム整列対応のCSSテンプレート
※自分の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 27 28 |
/* 行（カラム） */ .row { max-width: 930px; /* 自分のサイトに合ったマックス幅を指定してください */ margin: 0 auto; } /* クリアーフィックス （回り込みの影響を解除する） */ .row:after { content: ""; display: block; clear: both; } /* カラムの回り込み設定 左マージン設定 */ .col { float: left; margin-left: 3.2%; } /* 左端のカラムの左マージンを削除 */ .col:first-child{ margin-left: 0; } /* 各カラムの幅を％で設定 */ .one-second {width: 48.4%;} .one-third {width: 31.2%;} .one-fourth {width: 22.6%;} |
使い方：2カラムの指定
・２カラムにしたい要素のクラスに「col」、「one-second」を指定してください。
・親要素のクラスに「row」を指定してください。
|
1 2 3 4 5 6 7 8 |
<div class="row"> <div class="col one-second"> カラム１ </div> <div class="col one-second"> カラム２ </div> </div> |
使い方：3カラムの指定
・3カラムにしたい要素のクラスに「col」、「one-third」を指定してください。
・親要素のクラスに「row」を指定してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row"> <div class="col one-third"> カラム１ </div> <div class="col one-third"> カラム２ </div> <div class="col one-third"> カラム３ </div> </div> |
使い方：4カラムの指定
・4カラムにしたい要素のクラスに「col」、「one-fourth」を指定してください。
・親要素のクラスに「row」を指定してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="row"> <div class="col one-fourth"> カラム１ </div> <div class="col one-fourth"> カラム２ </div> <div class="col one-fourth"> カラム３ </div> <div class="col one-fourth"> カラム４ </div> </div> |
まとめ
最後にまとめると、floatで整列させる時のポイントは以下になります。
皆さんも上記に注意して実装してみてください！
それでは！
スポンサーリンク
