cssで横並びさせるときのTips


 
cssで要素を横並びにさせる方法を幾つか紹介致します。
表示結果は同じですが、シーンによって使い分ける必要があるので、より多くの選択肢を持っていた方が、より迷いなくコーディングできるかと思います。

pug,stylusで記載していますが、書き方に慣れていない方もこれを期に慣れておくとよいかもしれません。

こちらで少しだけ書き方を紹介しています。

pugでパスを取得してmeta管理してみよう

stylusのmixinでメディアクエリ指定をわかりやすく書く

 

float

おそらくcssを勉強して一番最初に学ぶ横並びの方法です。
clearfixもかなり使うシーンがあるので、mixinにする人も多いかと思います。

See the Pen float: left; by tetsuro ebata (@ebatetsu) on CodePen.0


 

display: table;

レスポンシブデザインの際にPC表示はテーブルレイアウト、スマホ表示はリストレイアウトなどの場合はdlタグベースで実装したりなどあります。

See the Pen display: table; by tetsuro ebata (@ebatetsu) on CodePen.0


 

 

display: flex;

こちらも非常に簡単に横並びを実現できるプロパティです。
親要素に指定すれば子要素は勝手にFlexboxアイテムになります。
様々なプロパティを設定できるので多くのシーンで活用可能です。

See the Pen display: flex; by tetsuro ebata (@ebatetsu) on CodePen.0


 

display: inline-block;

こちらで横並びにできるのは多くの方が知っていると思いますが、隙間を埋める方法は意外と知らない方が多いのではないでしょうか。
display: inline-block;を指定した要素にfont-sizeを指定し、親要素にfont-size: 0;を指定すると隙間がなくなります。
個人的に横並び、中央寄せのグロナビに使用する場合が多いです。

See the Pen display: inline-block;の隙間を無くす by tetsuro ebata (@ebatetsu) on CodePen.0


 
 
いかがでしょうか。
参考にして頂ければ幸いですm(_ _)m

他にこんな方法あるよ!みたいのがあれば教えてください。