CSS floatで要素を綺麗に整列させる２つのポイント
こんにちは、koheiです。
Webサイトを作る時、HTML,CSSで実装していきますが、初心者で一番躓くのが要素を横に並べたい時に使うfloatプロパティではないでしょうか？
僕も最初floatがさっぱり分かりませんでした。でもfloatを理解すると、一気に実装スキルが上がります！
ということで、今日はfloatで要素を綺麗に整列させる２つのポイントをご紹介します。
目次
floatプロパティの基本コード
まずは、単純に画面の中央にdiv要素のboxを３つ横に並べてみましょう。
HTML、CSSは以下のように記載します。
<div id="main_box"> <div id="box1"> box1 </div> <div id="box2"> box2 </div> <div id="box3"> box3 </div> </div>
#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ファイルへコピーしましょう。
/* 行（カラム） */
.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」を指定してください。
<div class="row"> <div class="col one-second"> カラム１ </div> <div class="col one-second"> カラム２ </div> </div>
使い方：3カラムの指定
・3カラムにしたい要素のクラスに「col」、「one-third」を指定してください。
・親要素のクラスに「row」を指定してください。
<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」を指定してください。
<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で整列させる時のポイントは以下になります。
皆さんも上記に注意して実装してみてください！
それでは！
