HTML/CSS プログラミング

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

masahide

14年間務めた大手自動車会社を退職 TECH CAMP短期集中コース受講 地元の自社、受託開発企業へ就職 やればできるを発信しています。

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

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

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

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

【まず初めにCSSとは?】

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

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

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

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

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

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

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

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

 

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プロパティを左揃えにしているので、左から順に横並びになっています。

 

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

そして次に、box2だけ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;
}

参考サイトはMDN

言語使用サイトMDN

プロパティの使い方に迷ったらここを確認すると、どのような動きをするか確認することができます。

慣れてくると、command + option + i で検証ツールを開き、確認する方が早かったりします。

floatって入力すると、どのような事ができるのか候補を表示してくれます!

masahide(筆者)
検証ツール本当に便利!!

 

まとめ

まとめ

  • floatプロパティは要素を浮かせてから左か右に集める
  • 要素が隠れてしまった場合はclearプロパティを使う
  • 横並びにしたいだけならdisplay: flex;を使うと便利

 

以上が自分なりのfloat要素の解釈になります。間違っていたら指摘していただけるとありがたいです。

現在はBootStrapやBlumaを使い始めたので、あまりCSSを書くことはありませんが、基礎知識があった方がフレームワークにも対応しやすくなると思っています。

-HTML/CSS, プログラミング
-, , , ,

© 2020 まさブログ Powered by AFFINGER5