WEBで要素を横並びにするときに選ぶCSSってどうしよう！

こんにちは、プロクラスの渡辺です！
突然ですが、CSS（htmlとか、ITに関わるものすべてですが…）って日々新しいものが生み出されていて、流行りのデザインが簡単に実現できるようになっていたりjqueryやjsを使わずアニメーションができたり「あらかたのデザインは再現できる！」って感じがします。

ただその分、「同じような表現ができるcssがいくつかある」っていうのもちょっと困ったもんなのです。

今回は「要素を横並びにするCSS」って結局どれを使ったらいいの？っていうのを考えたいと思います！ 😉

要素を横並びにするCSSって調べたら「flex」「inline-block」「float」の3つが出てくるんじゃないでしょうか。
コーディングをしはじめた頃、すっごく困ってしまいました。なんでそんなにあるん？？ 👿
CSSの書き方は調べたらわかりやすいサイトがた～～くさんあるので！
３つを比べてそれぞれ「どういうデザインで」使用したらいいのかまとめました！

floatについて

floatは横並びするのに一番ラクです。ラクなのとどのブラウザで見ても「ほぼ全部」ちゃんと表示してくれるところが大好きです。ちょっと解除してあげないといけないのが面倒ですけど、「clearfix」がすべて解決してくれるのでなんてことありません！

floatは「100％」まるっと使えるのでぴちっと要素を横並びにしたいときに便利です！
たとえば画面の半分から左と右とで違う画像を配置するのだとか「要素の増減もない」「このデザインのままタブレット表示まで保ってほしい」ものには使いやすいCSSです！

inline-blockについて

inline-blockって「float」とどう使い分けたらいいのかちょっと分かりにくいですよね。
分かりにくいだけで、分かったらとっても使いやすいCSSです。解除とかもいらないし！

「inline-block」はfloatと違って100%の幅に「49％：49％ ※ピッタリ半分ずつの要素の場合」ってしないとカラム落ちしてしまいます。が！　「2つ（またはそれ以上）の要素を同じサイズで分割し、なおかつ画面のセンターに配置する」とか「要素同士のはじまりの高さをそろえる（もしくは上下のcenterにする）」とかそういうデザインにはもってこいのCSSです！
次のflexともちょっと近いので、floatとflexの良いところどりって感じがします 😳

flexについて

新しめのCSSだと思います。「グリッドレイアウト」・「カードデザイン」が流行ったころから頻繁に使用されているところを見かけるようになりました。
グリッドレイアウト・カードデザインに共通するのって「要素の内容・レスポンシブに柔軟に対応しているデザイン」だと思っています。

使いどころとしては「画面幅に合わせて要素が移動する必要がある」「横並びの要素がたくさんある」「要素が増減する」ものにはとっても優秀なCSSです！

まとめ✊

これが正解！というわけではありませんが、CSSにもそれぞれ「得意な」デザインがあります！
要素の配置だけで言えば「position」もありますし、基本的なmargin・paddingもそうですよね。
CSSを理解したら表現できるデザインもたくさん増えるので、普段から使っているのも、どういう性格をしたCSSなのかふとした時に気にしてあげるのもいいかもしれません 🙄
使用する場面は私たちコーダーに任せられているようなものなので、適材適所でCSSも使っていきたいですね～！