floatプロパティの真の役割とブロック要素
こんばんは、ハマッキーです。
本日は昨日言っていたとおり、HTML/CSSのfloatプロパティについて学習を始めたての方がよく間違えやすいポイントを自分なりに解説をしてみたいと思います。ある程度理解されてる方からすると、「そんなもの知ってて当然」て感じの内容なので生暖かい目で見ていただくなり、「その表現よりこういう表現の方がいいよ！」などアドバイスをいただければ幸いです。
では超雑ですが、ウェブサイトで以下の画像のように2つの箱を一番上で横に並べることを最終的な目標にします。
HTMLの表記は以下のhatena.htmlとしましょう。
head要素で読み込むスタイルシートのうち、style.cssで今回の2つの箱のデザインのレイアウトを決めていきます。
normalize.cssとは、HTMLファイルをGoogle Chrome、Safari、Firefoxなどといった様々なブラウザで読み込むときにブラウザの種類によって生じるブラウザ間の表記誤差を調整してくれるものなので、今回の話ではスルーしておきます。
箱のデザインとサイズですが、Box1（箱1）を1辺400pxの赤い正方形、Box2（箱2）を1辺200pxの黄色い正方形にする場合、style.cssにはそれぞれのBoxにheightで高さ、widthで横の長さ、background-colorで背景色を指定することができます。
CSSはこんな感じになります。
この状態でhatena.cssを読み込むと…、
このような配置になります。font-sizeとtext-align、line-heightはBoxの中の文字の配置と大きさを決定しているだけですので今回の赤箱と黄色い箱の配置には関係してませんので、省略します。HTMLとはウェブサイトの画面の左上に重力が存在しているようなものですので、仮にhatena.cssの<body></body>の中にBox4、Box5…と追加していけば、画面左寄りで、どんどん下にBoxが追加されていくことになります。
さて、話を本題に戻すと、この黄色いBox2を赤いBox1の右に配置したいというのが、今回の話での目的でした。
何も指定していない状態では、この箱はHTMLの左上に生じる重力によって箱2は左によったままですので、なんとか右に持っていきたいところですね。
そこで使うのが、今回お話したいfloatプロパティになります。
floatプロパティはfloat: right;とCSSに存在するクラス内に記述することで、そのクラスを右端に配置することができます。
HTMLは左上に重力があるという話をしたのでBox1は特に弄らず、Box2だけをfloat: right;すれば画面の右に持っていくことができそうです。
では早速CSSを編集してみましょう。
ではこの状態で箱が横並びになるのか見てみましょう。
おかしいですね。
最終的な目標は一番上で箱ふたつを横並びにすることだったはず。
これがCSSを学び始めたばかりの初心者がハマるfloatプロパティの落とし穴（だと思ってます）なんです。HTMLを表示している画面で右クリックして、「検証」を開いてHTMLとCSSがどう作用しているか見てみましょう。
この検証をみると、箱1の右に透明な箱がくっついてきていて、その下に箱2がくっついているのがわかります。
これはHTMLの「ブロック要素」というものが関係しており、Box1、Box2ともにHTMLで、<div class = "BoxNo.">という表記でclassという属性で定義してあります。
このclass属性はブロック要素という要素に分類され、属性内の全てと、その属性の横全てを一つの塊とみなしてしまいます。
そのため、箱1は画面の横全てまでがBox1というクラスであり、そのため箱2は画面の一番上に行きたいけどBox1のおまけみたいな部分に邪魔されて上に行けなかった、ということだったわけです。
ではどうすればいいのか。
結論から言いますと、Box1にfloat: left;を当てることで横並びになります。
floatとは日本語で「浮く」という言葉です。私なりの解釈ですが、float: left; は「浮かぶことで、要らないブロック要素のおまけを切り捨てて独立し、左に行ってね！」ってことだと思ってます。
今回の例だと、要らないおまけが消えたことでBox1の右側にできていた壁が消え去り、Box2は上に無事たどり着くことができたというわけです。
最後に編集したCSSを貼っておきます。
まとめになりますが、
HTMLは左上に重力がありますが、横並びにしたい場合はもともと左側にあるクラスであってもちゃんとfloat: left; を使おうね！
ってことです。
まあ今回の内容は調べればいくらでも出てきそうですが、自分や自分の周りの方にもHTMLは左上に重力があるので横並びさせるときにfloat: left;は要らないって錯覚している人はまあまあいたので、この勘違いをしてる人はきっと私だけではないはず！と思って今回の日記（？）を書かせていただきました。もしこの記事を読んだ方で、一人でもお悩みを解決できた方がいらっしゃればとても嬉しく思います。
それでは本日はこの辺で失礼したいと思います。
読んで頂いた方、ありがとうございました！コメント等お待ちしております！
ではまた明日の日記でお会いしましょう！
