【9月枠も残りわずか】転職保証コース

CSSのfloatの使い方を分かりやすく解説!【もうfloatで悩まない】

floatプロパティって一体何??」「解説を読んでもよく分からない!!」

そう思ったことはありませんか?

今回の記事では、floatについて初心者の方向けに分かりやすく解説していきます!

floatとは??

floatは、ブロック要素の並び方を変えるときに使用します。

floatを使用することによって、要素を浮いた状態にし、並び方を変えることが出来るのです!

 

floatプロパティは、Webサイトのレイアウトを変更する際にすごく便利です。
こちらのWebサイトにも、実際にfloatが使われています。「activity」の下の三つの画像にfloatがかかっていて、並び方を変えています。

floatはどうやって書く?

それでは、floatの書き方について解説していきます!

floatの書き方の基本

floatは、「float:値;」で指定します。

この形は決まっているので、頭に入れるようにしましょう!

floatの書き方の種類は三つある

floatの書き方には、三つの種類があります。

  1. left(要素を左寄せにできます)
  2. right(要素を右寄せにできます)
  3. none(配置を指定しません)

それぞれ解説していきます!

実際にfloatを書いてみよう!

では、実際にfloatプロパティを書いてみましょう!

要素を左寄せしてみよう!

こちらの要素を左寄せしていきます。

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

<ブラウザでの表示>

CSSに、「float: left;」をそれぞれ追加

左寄せにするために、「height: 200px;」の下に 「float: left;」をそれぞれ追加していきます。

<floatなし>

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

 

<floatあり>

float.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;
 height: 200px;
 float: left;
}

CSSに「float: left;」をそれぞれ追加する事ができたら、ブラウザで確認してみましょう!

きちんと左寄せの横並びになりました!

このように表示されたらOKです!

要素を右寄せにしてみよう!

では次に、要素を右寄せにしていきます!

先ほどと同じようにCSSの「height: 200px;」の下に 「float: right;」をそれぞれ追加していきます。

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

保存してブラウザで確認すると、このように右寄せになります!

「float:none;」について

「float:none;」を使用すると、今まで横並びにする為に使用したfloatプロパティを、無かったことに出来ます。

pcで横並びにした要素を、スマートフォンでは縦並びに表示させたい時に、CSS内で「float:none;」を指定するとfloatが解除され、縦並びに表示させることが出来ます。

主にレスポンシブ対応の場面で使用します。

レスポンシブ対応についてさらに詳しく知りたい方は、こちらの記事をご覧下さい。

レスポンシブは難しくない!CSS初心者のためにわかりやすく解説

 

floatプロパティによる問題点

要素を横並びにするのに便利なfloatプロパティですが、問題点もあります

floatプロパティを指定すると、要素が浮いている状態になってしまいます

それにより、floatプロパティを指定していない要素が、floatプロパティを指定した要素の下に回り込んでしまうのです。

先ほどのコードの、redの部分のfloatプロパティを消してみましょう。

float.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のブロック要素が、greenとyellowの要素に回り込んでしまっています。

このような問題を防ぐために、回り込みを解除する必要があります!

回り込みを解除するには?

上のようなトラブルを解決するためには、「clearfix」というプロパティが使えます!

こちらの記事に詳しく解説してあるので、詳しくはこちらの記事をご覧ください!

CSSのclearfixについて徹底解説【floatをスッキリ解除!】

まとめ

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

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

  • floatプロパティでは要素を浮いている状態にし、横並びにする事ができる。
  • 要素を左寄せにするには「float: left;」
  • 要素を右寄せにするには「float: right;」
  • 回り込みを解除するには「cleafix 」を使う

floatプロパティはWebサイトのレイアウトを変更する際にとても便利なプロパティです。

ぜひ、今回の内容を頭に入れて、floatプロパティを使いこなせるようにしましょう!

 

10月枠も残りわずか!!

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

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

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

 

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

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