#cssファイルによるページデザイン
※長文になりますので、本題である「clearfixの使い方」が手っ取り早く知りたい方は右のページ内リンクより飛んでください(^ ^;)
cssを使ってhtmlにて作成したインターネットのページをデザインする際、２カラムや３カラムというような、縦に２列、３列というように要素を作っていくデザインを作ろうと思った際、以下のようにfloatを使うことがよくあります。
<!DOCTYPE html>
<html>
<head>
~中略~
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>
.header {
background-color: blue;
width: 400px;
height: 100px;
}
.left {
background-color: skyblue;
width: 150px;
height: 250px;
float: left;
}
.right {
background-color: red;
width: 250px;
height: 250px;
float: left;
}
.footer {
background-color: yellow;
width: 400px;
height: 100px;
}
上のようなデザインをした場合、以下のような内容が、ブラウザの左上に詰められた状態で表示されます。
| ヘッダー：青 |
| メイン左:水色 | メイン右:赤 |
| フッター：黄色 |
画像じゃなくてわかりにくいとは思いますが、その場合は上のをそのままコピペして試していただければ実体験もできてわかりやすいかな・・・と。
・・・・・すみません。
スクショを撮る手間を嫌っただけの、ただの手抜きです(>_<;)
ただ、これを「ブラウザ上で中央に寄せたい」と思った際には、**margin: auto;**を使うこととなりますが、ただ使うと以下のような内容になります。
#ただ各要素にmargin: auto;を使った場合
htmlは変わらないので省略します。
.header {
background-color: #141f40;
width: 400px;
height: 100px;
margin: auto;
}
.left {
background-color: #80bfa8;
width: 150px;
height: 250px;
float: left;
margin: auto;
}
.right {
background-color: #8c2727;
width: 250px;
height: 250px;
float: left;
margin: auto;
}
.footer {
background-color: #d98d30;
width: 400px;
height: 100px;
margin: auto;
}
| ヘッダー：青 |
| メイン左:水色 | メイン右:赤 | フッター：黄色 |
俗に**「まわり込み」**と呼ばれる現象で、フッター部分がメインの右側に行ってしまっている上、メイン以下、フッターは中央に寄っていません。
#まわり込みの解除
フッターがメインの横にきてしまっている現象をまず直しましょう。
とはいえ、結構簡単です。
以下のように、フッター部分に**clear: both;**を追記しましょう。
~前略（変わるのはfooterの最後の行だけです）~
.footer {
background-color: #d98d30;
width: 400px;
height: 100px;
margin: auto;
clear: both;
これで、まわり込みは解除でき、同時にフッターはmargin: auto;の効果で中央に寄せられます。
簡単ですね(^_^)
ただ、この段階では、メインは左寄せのままです。
#お待ちかねのclearfix！
さて、途中も読んでくださった方、長文失礼しました。
リンクできてくださった方もいますかね？
メイン部分(というか、指定した要素)も中央に寄せようとする場合、これが非常に便利です。
clearfixは、指定したい要素の親要素にclassで指定し、使用します。
今回、中央に寄せたいのはleftとright・・・メインの部分です。
今、この二つだけに対する親要素がありませんので、今回はhtmlにも手を加える必要があります。
<!DOCTYPE html>
~中略~
<body>
<div class="header"></div>
<div class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</div><!-- main clearfix -->
<div class="footer"></div>
</body>
</html>
上のように、中央に寄せたいleft、rightの両要素を囲う形で新たにdivを作り、ここでは仮にmainとclassを指定しています。
そのmainにもう一つ。
肝心要のclearfixを指定します（mainとの間にインデント一つ入れてそのまま書く形でOKです）。
その後、cssに対し、bodyとclearfixを指定した変更を加えます(変更ない部分は略してます)。
body{
margin: 0 auto;
width: 400px;
}
~中略~
.clearfix::after{
content: "";
display: block;
clear: both;
}
::afterが擬似要素だとか、その後にはcontentが必須だとかなんだとか細かい部分の説明は省きますが、ここでは仮に全体のwidth、つまり幅を400pxとしていたので、bodyにもそのように指定。
これで、中央に寄せられないでいた左右のメイン要素も、中央によせられます。
より細かいところの説明は現在の僕にはちょっと難しいので、別のところで調べていただくか、そのうち更新されるのを期待してくださると幸いです(^ ^;)