CSSで横並びを作る。複数のパターンをご紹介します

HTML・CSSでコーディングする際に、高確率で出てくる要素の横並び。

横並びはいくつかの方法があるので、有名な３パターンをご紹介します！

float: left;

多くのWEB・プログラミングスクールで最初の方に紹介されるfloat。

floatは浮かすという意味で要素を浮かすことで、空いたスペースを詰める動きで横並びを作っています。

See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.

floatにはfloat:rightもあり、今回は２つともにいれましたが、どちらか１つだけ（横並びしたい要素）にだけfloatを入れることも可能。

ただfloatは浮かすので、その下に他の要素を入れていくと、marginやpaddingで距離を調整しないと上手くいかなかったりとするので、あまり使用頻度は高くないと思います。

display: inline-block;

ヘッダー、フッターなどのメニューやリストの横並びで多く使用されているのが、display: inline-block;

元々要素にはblock要素とinline要素があり、inline要素はディフォルトで横並びになる性質があります。

※ inline要素の主なものは、【aタグ】【imgタグ】【spanタグ】など

ただ、inline要素だとwidthなどの指定ができなかなったり。。。

それを解消するのがdisplay: inline-block;

display: inline-block;はinline要素の性質を保ちながらblock要素にしてね！ということなので、横並びにもなるし幅などの指定も可能

See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.

display: flex;

最もおススメなのがdisplay: flex;　これはdisplay: flex;で指示された要素の中身を横並びにする指示です。

※display:inline-blockなどと指示する位置が違うので注意！

See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.

display: flex;で横並びにした要素を上下中央にする場合は、 align-items: center;を記載することでOKです。

See the Pen align-items: center;の説明 by ALcuesto (@ALcuesto) on CodePen.

いかがでしょうか。

このように、横並びをするには複数のパターンがあるので、指示する位置や表現したいデザインに応じてCSSを選んでくださいね！

ちなみに私は、ほぼdisplay: flex;で対応して、メニューだけdisplay: inline-blockでやっています！