floatプロパティって一体何！？マークアップ初学時にハマる『要素が消えてしまう』現象

2020年8月9日

masahide

エストニアにKoronCoron OÜ設立｜親子向けノーコード教育事業展開、Webアプリケーション受託、デザイン修正などを展開朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。

4月20日〜6月末（76期）までテックキャンプエンジニア転職コースを受講し、現在IT企業へ転職活動中のまさひで(@john01tgmck)です。

テックキャンプでは、一番初めに『HTML / CSS』を学びます。

WEBアプリケーションを作っていく上でのスタート地点のようなマークアップ言語になります。

そんな中でもCSSのfloatプロパティには悩まされたので、自分の備忘録も含めて、記事にしようと思いました。

【まず初めにCSSとは？】

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

マインクラフトの家づくりに例えるとわかりやすいかと思うので、下の写真を参考にしてみてください。

HTMLで骨組みを作って、そこに壁を貼ったり、ドアや屋根を付けたりして、『家』が完成します。

外側の修飾を任されているのが、CSSとなります。

HTMLだけで書いたプログラムのイメージ

左のコードにCSSを当ててみたイメージ

休日に小学校１年生になる娘と一緒に家やお城を作っています。

任天堂Switchが買えるようになったら「大きなTVで一緒にやろうね」と約束していますが、娘の気持ちは『動物の森』に傾いています（泣

1 CSS floatプロパティとは
2 まとめ

CSS floatプロパティとは

floatプロパティの設定値

「left」、「right」、「none」を指定します。

left：指定したボックスを左側に配置し、後に続く要素を右側に回り込ませます。

right：指定したボックスを右側に配置し、後に続く要素を左側に回り込ませます。

none：ボックス領域の左右の回りこ込みはされません。

要素を横並びにするプロパティ

実際にコードを書いてみます。

--html--
<body>
   <div class="box1">box1</div>
   <div class="box2">box2</div>
   <div class="box3">box3</div>
</body>

--CSS--
.box1 {
 float: left;
}
.box2 {
 float: left;
}
.box3 {
 float: left;
}

通常であれば、box1 / box2 / box3が縦に並んでいくはずですが、floatプロパティを左揃えにしているので、左から順に横並びになっています。

横並びにするだけではない

そして次に、box２だけfloatプロパティを外すと、box2が消えてしまいます。

次のコードはわかりやすいように色を付けてみました。

--CSS--
.box1 {
 float: left;
 background-color: red;
 color: white;
 width: 200px;
 height: 100px;
}
.box2 {
 background-color: blue;
 color: white;
 width: 200px;
 height: 100px;
}
.box3 {
 float: left;
 background-color: yellow;
 color: black;
 width: 200px;
 height: 100px;
}

赤いブロックがbox1黄色いブロックがbox3になります。

下にチラッと見えているのが、box2（青色ブロック）となります。

なぜこのようなことが起こってしまっているのか、上からの視点では分かりにくいので横から見てみます。

実は青色ブロックは赤色ブロックの下に隠れていました。

今回は全てのブロックの要素が同じ大きさだったので、隠れましたが、違うサイズになっていると「あれ？サイズ変わった？」

中々この仕組みが理解できず苦労してたことを覚えています。

隠れてしまう現象を解除する

clearプロパティを使用すると、青色ブロックが顔を出します。

これを回り込みの解除と言います。

.box1 {
  float: left;
  background-color: red;
  color: white;
  width: 200px;
  height: 100px;
}
.box2 {
  background-color: blue;
  color: white;
  width: 200px;
  height: 100px;
  clear:left;
}
.box3 {
  float: left;
  background-color: yellow;
  color: black;
  width: 200px;
  height: 100px;
}