【初心者向けCSS】floatで横並びは「こういうもの」？モヤっとした疑問がスッキリした話

こんにちは。みとまるです。

最近、ProgateでHTML/CSSを学びはじめました。
これまでC言語やJavaScriptを少し触ってきた私ですが、HTMLとCSSは正直難しく感じています。
とくにCSSは「思った通りに動かない！」というモヤモヤが多めです。

そんな中、今回のテーマは「floatでの横並び」です。
勉強中に出てきたこの方法が、少し不思議だったのでブログに残しておこうと思います。

float で横並びになるのは「こういうもの」？

Progateのレッスンでは、こんなコードが出てきました。

.header-logo {
  font-size: 36px;
  float: left;
}

li {
  list-style: none;
  float: left;
}

これでロゴとメニュー項目（li）がすべて横並びになるんです。
「えっ、これだけで？」というのが正直な感想でした。

floatは元々画像やボックスを横に寄せるためのプロパティなので、要素を横並びにしたい時にもよく使われます。
ただ、「上下の並び」から「横並び」に変わるのが少し直感的じゃないな〜と最初は思いました。

でも、こういうものと割り切ってOKのようです。

floatは、昔から使われている方法で、今でも十分役立つテクニック
CSSでは時々「そういうルール」として覚えるのが良さそうです。

ただし、floatにはデメリットもある

floatで横並びにすると、親要素が高さを失ってしまうことがあります。
（今回のProgateの例では起きていませんが）

これを防ぐために「clearfix」というテクニックが必要になる場合も。
このあたりはまた学びの中で登場しそうです。

次はもっと便利な方法「Flexbox」へ

Progateでも今後学ぶ予定ですが、今はFlexboxというより直感的で使いやすい方法が主流です。

display: flex;

と指定するだけで、要素を横並びにでき、
floatのように「うまくいかない…」ということが減るそうです。

今はfloatもFlexboxもどちらも覚えておき、
シーンによって使い分けられるようになるのが目標です！

Progateをやってみて感じたこと

Progateは自分の手を動かして学べるのがとても良いです。

JavaScriptはC言語の知識も活かせて比較的スムーズに理解できましたが、
HTML/CSSは「見た目」を扱うので、やはり少し感覚的なところがあり難しく感じています。

でもこうやって学びながら「なるほど！」が増えていくのが嬉しいですね。

まとめ

• floatでの横並びは最初は少し不思議に感じるけれど「そういうもの」として覚えればOK
• floatにはデメリットもあるので、いずれFlexboxも覚えると良さそう
• Progateで少しずつ学びを積み重ねて、CSSも楽しめるようになってきました！

これからも、学びの記録としてこういった気づきや疑問もどんどんブログに書いていこうと思います。

同じようにCSSでつまづいている方の参考になれば嬉しいです🌷