CSSのclearfixを完全網羅【初心者でも分かる入門図解付き】 | プログラミング入門ならWEBCAMP NAVI
【12月枠も残りわずか】転職保証コース

CSSのclearfixを完全網羅【初心者でも分かる入門図解付き】

Webページなどを作る際、レイアウトが崩れてしまったり、うまく表示できなかったり、、、
上手に整えられなかった経験はありませんか?
実は、「floatプロパティ」が原因となっている場合が多くあります。

floatプロパティの解除法は様々な手法がありますが、「clearfix」なら簡単に問題を解決することができます。

そこで今回は、HTML/CSS初心者の方でもわかる様、clearfixの書き方やfloatの回り込みの解除方法について解説していきます。
実際にコードを書きながら実践的に学べる様な記事になっておりますので、作業をしながらプログラミングの学習へ活かして頂ければと思います!

clearfixとは?

レイアウトが崩れてしまった際に役立つ「clearfix」は、どんな機能があるのでしょうか?

実は、clearfixを用いることによってfloatプロパティによる回り込みを解除することができるのです。

「floatプロパティって一体何??」と思われた方は、まずはこちらの記事をご覧ください。

CSSのfloatを完全マスター【初心者でも分かる入門講座】

floatプロパティを使用することによって、縦に並べられたブロック要素を横並びにすることができます。

しかし、floatプロパティを用いると要素が浮いた状態になるため、他の要素が下に回り込んでしまうトラブルが起きてしまいます。

そのトラブルを解決するために使えるのが、clearfixです。

clearfixは、「浮いた要素のバリア機能」とイメージすると分かりやすいと思います。

clearfixを指定することにより、浮いた要素にバリアのようなものを張ることができ、浮いた要素に他の要素が回り込むのを防ぐことが出来るのです。

こちらのWebサイトも、float・clearfixが使用されています。

「activity」の下の四角い項目が綺麗に配列されていますが、clearfixによって他の要素が回り込むのを防いでいます

clearfixでfloatによる回り込みを解除する方法

それでは、実際にclearfixを用いてfloatを解除する方法を解説していきます!

こちらの画像の緑と黄色のブロックだけを横並びにしていきます。

【理想形】

 

まず、横並びにするためにCSSでyellowとgreenに「float: left;」をそれぞれ指定します。

HTML・CSSのコードはこちらです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>clearfixの使い方</title>
    <link rel="stylesheet" href="clearfix.css">
</head>
<body>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
</body>
</html>
clearfix.css
.green{
  background-color: green;
  width: 200px;
  height: 200px;
  float: left;
}
.yellow{
  background-color: yellow;
  width: 200px;
  height: 200px;
  float: left;
}
.red{
  background-color: red;
  width: 200px;
}

しかしブラウザで表示させると、redのブロック要素が消えてしまいました!

redのブロック要素が、floatによって浮いたgreenとyellowの要素の下に回り込んでいます!!

clearfixを用いて回り込みを解除し、このような状態を目指します!

 

ステップ1 HTMLで要素を囲む

まずはじめに、clearfixを指定するHTMLの要素をdivで囲みます。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>floatの使い方</title>
    <link rel="stylesheet" href="float.css">
</head>
<body>
    <div class="clearfix">
    <div class="green"></div>
    <div class="yellow"></div>
    </div>
    <div class="red"></div>
</body>
</html>
floatプロパティによって浮いた状態の要素(green,yellow) を、<div class=”clearfix”>で囲みます。

ステップ2、CSSでclearfixを指定する。

次に、CSSでclearfixを指定します。

CSS
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

.green{
  background-color: green;
  width: 200px;
  height: 200px;
  float: left;
}
.yellow{
  background-color: yellow;
  width: 200px;
  height: 200px;
  float: left;
}
.red{
  background-color: red;
  width: 200px;
  height: 200px;
}

 

.clearfix::after {
content: “”;
display: block;
clear: both;
}
を一番始めに記入することにより、HTMLで指定したclearfixに全て対応させる事ができます。

すると、floatによって浮いた要素にバリアのようなものが張られ、redのブロック要素が回り込まなくなります。

赤の要素が緑と黄色の要素に回りこまなくなりましたね!!

ブラウザで、このように表示されたらOKです!

まとめ

いかがだったでしょうか?

今回学習した内容を、ざっくりと復習しましょう!

  • floatによる回り込みをclearfixで解除できる
  • clearfixは、浮いた要素に壁をつけるイメージ
  • HTMLでclearfixをかける要素を<div class=”clearfix”>で囲む
  • CSSで.clearfix::after {~  を記載

つまずきやすい内容ですが、clearfixはCSSでレイアウトを作成するときに大変便利なプロパティです。

しっかりと内容を理解して、今後の学習に活かしていきましょう!

12月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%