はじめに
CSSで左寄せや右寄せのレイアウトを行いたい時は、floatプロパティを使ったフロートレイアウトが便利ですよね。
これに関連したプロパティの一つに、clearがあります。
フロートレイアウトにおける回り込みを解除するためのものですが、clearをしてもしなくてもレイアウトが変わって見えないことがあり、混乱してしまうケースが多いようです。
ここでは、フロートレイアウトの基本とclearプロパティの使用有無による違いを解説します。
フロートレイアウトとは
まず、フロートレイアウトについておさらいしていきましょう。
CSSではfloatプロパティに適切な値を指定することで左寄せや右寄せを行い、後に続く要素を反対側に回り込ませることができます。これをフロートレイアウトと呼び、例えば左側に画像を掲載して、右側にそのコメントや説明のテキスト文を並べたい時などに便利です。
フロートレイアウトをしないとき
理解のために、まずフロートレイアウトをしない場合の例を見てみましょう。まず、下記のようなHTMLファイルを作成します。
[test.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>float test</title>
<link rel="stylesheet" href="css/no-float.css">
</head>
<body>
<h1>フロートの練習</h1>
<div id="wrap">
<div id="box1">BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト</div>
<div id="box2">BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト</div>
<div id="box3">BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト</div>
</div>
</body>
</html>
次に、上記HTMLファイルと同じ階層に”css”ディレクトリを作成し、その中に下記のようなCSSファイルを作成します。
[no-float.css]
/* no-float.css */
#wrap {
width: 100%;
background-color: gray;
}
#box1 {
background-color: purple;
color: white;
width: 50%;
}
#box2 {
background-color: green;
color: white;
width: 50%;
}
#box3 {
background-color: blue;
color: white;
}
HTMLファイルをブラウザで見ると下記のようになり、上からbox1・box2・box3の順でレイアウトされます。
フロートレイアウトをするとき
それでは、CSSでfloatレイアウトの指定をするとどうなるでしょうか。”css”ディレクトリに新たに下記ファイルを作成します。
[float-noclear.css]
/* float-noclear.css */
#wrap {
width: 100%;
background-color: gray;
}
#box1 {
background-color: purple;
color: white;
width: 50%;
float: left;
}
#box2 {
background-color: green;
color: white;
width: 50%;
float: right;
}
#box3 {
background-color: blue;
color: white;
}
box1ではfloat: leftを、box2ではfloat:rightを指定していることに注目してください。これはそれぞれ左寄せ・右寄せを意味し、その後に続く要素を逆側に回り込ませるようレイアウトします。
HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。
<link rel="stylesheet" href="css/float-noclear.css">
下記のように表示されるはずです。box1が左寄せされ、後に続くbox2はbox1の右側に回り込む形で右寄せされ、box3はその逆側である左側に回り込んでいますね。
clearプロパティとは
floatプロパティの関連プロパティとして、clearがあります。
通常、直前の要素がfloatで左寄せもしくは右寄せされている場合、その逆に回り込む形でレイアウトされるのですが、何らかの理由で回り込みを解除したい場合に使用されます。
- clear: left 左寄せされた要素に対する回り込みを解除する
- clear: right 右寄せされた要素に対する回り込みを解除する
- clear: both 左寄せまたは右寄せされた全ての要素に対する回り込みを解除する
- clear: none 回り込みを解除しない（デフォルト値）
clearしてもしなくても同じに見える？
clearの効果を確認するため、”css”ディレクトリにさらに下記ファイルを作成してみます。21行目、box3でclear:bothが指定されていることに注目してください。
[float.css]
/* float.css */
#wrap {
width: 100%;
background-color: gray;
}
#box1 {
background-color: purple;
color: white;
width: 50%;
float: left;
}
#box2 {
background-color: green;
color: white;
width: 50%;
float: right;
}
#box3 {
background-color: blue;
color: white;
clear: both;
}
HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。
<link rel="stylesheet" href="css/float.css">
box1とbox2の高さが同じ場合
ウィンドウ幅によっては、box1とbox2の高さが同じになります。この時、clearを指定しても、表示結果はclearを指定しなかった場合と全く同じです。
[float.cssを指定した場合の表示]
box1の方がbox2より高い場合
しかし、文字数はbox1の方が多いため、ウィンドウ幅を広くしたり狭くしたりするとbox1の方がbox2より高さが高くなることがあります。
clear有無による違いはこの時明確になります。HTMLファイル(test.html)の6行目で指定するcssファイルを変更してウィンドウサイズを調整してみてください。
[float.cssを指定した場合の表示]
[float-noclear.cssを指定した場合の表示]
このように、一見clearの有無によって見え方が同じでも、ウィンドウサイズが変わると見え方は大きく変わります。
このことを意識してclearを明確に指定しないと、意図と異なる表示になることがあるので注意が必要です。
clearの設定は必要
上記のケースで、例えばbox1にバラの写真、box2にバラの説明、box3にまた別の花の写真を載せるのであれば、box3からは別の話題になるのでclearして新しい行から始めるべきですね。
また、余白にはwrapで指定した背景を見せたい場合でも、clearなしでは余白が生まれないので背景を表示することができません。
回り込みの解除をしたい場合は、プレビューでの表示に差がなかったとしても必ずclearの設定を行いましょう。
まとめ
フロートレイアウトの基本ルールとclearプロパティの使用有無による違いについて解説しました。
clearは指定してもしなくても表示が変わらないので、そもそも必要ないのでは？と思われることも多いですが、どんなサイズで表示されても意図通りのレイアウトとなるように、必要な場合は必ず使用しましょう。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
