プログラミング備忘録【CSS編②】
備忘録CSS編でCSSの大まかな説明をしました。
過去記事
https://note.com/john01/n/ne36038d34d53
今回はそんなCSSの中でも理解するのに苦しんだプロパティを紹介します。
横並びに使えるあの人『floatプロパティ』さんです。
floatプロパティとは？
使い方としては要素を横並びにすることができます。
実際にコードを書いてみます。
--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,2,3の要素が横並びになりました。
このとき要素がどのような動きをしているかというと
一度浮いてから左(float:left;)によっていきます。
全ての要素に異なる背景色をつけてbox2のfloatを外してみます。
--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;
}
こうなります。あれ？box2どこ行った・・・？
彼はbox1の下にちゃっかり配置されています。
立体的な絵が欲しかったのでまたもやマイクラ登場です。
Nintendo Switch欲しい…携帯だと画面ちっちゃい(ﾟωﾟ)
本来のブロックライン要素であればBox２のように
左上の重力に向かって積み上がっていきますが、floatを使うと
このようにz方向に浮いてから左上に向かうんですね。
floatプロパティよりもdisplay:flexの方が使いやすい！？
横並び要素として使うのであれば、浮かさずとも横並びにできる
display: flexの方が使いやすいし、わかりやすいです。
先ほどのコードを利用すると
親クラスに対してdisplay: flexを当ててあげればいいので
こんなコードになります。
.content {
display: flex;
}
.box1 {
background-color: red;
color: white;
width: 200px;
height: 100px;
}
.box2 {
background-color: blue;
color: white;
width: 200px;
height: 100px;
}
.box3 {
background-color: yellow;
color: black;
width: 200px;
height: 100px;
}
こうですね。
記述量も少なく、z方向のことも考えなくていいので
要素を横並びにするときはdisplay: flexがいいと思っています。
どのような時にfloatを使うのか
例えば写真の中にコメントを入れるように
子要素として配置するのではなく、シールを貼り付けるような
イメージで使うと使いやすいのかな？と思います。
詳しい内容はいつものサイトMDNでどうぞ！
https://developer.mozilla.org/ja/docs/Web/CSS/float