HTMLどうやって横に並べるの？CSSで要素を横並びにする方法 5選

display:flex;で一番混乱しやすいところは､横並びさせたい要素そのものにcssを指定するのではなく､親要素にflexを指定するところです｡

でも､慣れるととても便利です｡

他の要素のコーディングでも指定したい要素だけでなく､親要素を意識しながらコーディングしていくと､幅が広がって効率よくコーディングすることができます｡

折り返しにも対応できるので､画像の一覧等でたくさんの要素を横並びさせるページで折り返すことができます｡

子要素にもflexを指定することで上下中央揃えにも対応できます｡

要素の高さが揃っていなくても､自動で一番大きい要素に揃えられるのが便利なところでもありますが､背景色がある場合は､高さを揃えたくないデザインのときもあるので､横並びさせるだけのdivで囲って対応することがあります｡

See the Pen 横並び display:flex; by hashi84 (@hashi84) on CodePen.

display:inline-block;はflexとは逆に親要素をほとんど意識しなくてすむので違う意味で使いやすいです｡

デメリット改行を含めると並べた右側に小さな余白ができるので例につくったような背景がある要素には使えないです｡

横幅を超えると折り返しされるので､一覧ページでも使うことはできますが､謎の余白には注意が必要です｡

この右側の余白を回避するには､HTMLソースを改行せずにすべて横並びで書く必要があります｡

ソースが見にくくなるので､数が多くなるとあまり現実的ではありませんが､ツールを使ってリアルタイムにHTMLソースを整理できる場合はこの方法でもいいかもしれません｡

上下中央にするにはもうひとつdivで囲むとか､ひと手間かかります｡

See the Pen 横並び display:inline-block; by hashi84 (@hashi84) on CodePen.

以前は横並びの定番でしたが､現在はほとんど使うことがありません｡

floatを使うと､その親要素の高さがなくなるので､とてもコーディングが難しくなります｡

clear:both;だけを使うと､デザインの崩れは一見なくなりますが､高さ自体はなくなったままなので､応用が難しくなります｡

clearfixを使うと親要素の高さを維持できますが､それでも折り返したときに子要素の高さが揃っていないと思い通りに左揃えになってくれないので､JavaScriptで動的に揃えるか､強制的に高さを指定する必要があります｡

See the Pen 横並び float by hashi84 (@hashi84) on CodePen.

2020年現在､floatを使う必要があるところは画像等に文章をまわりこませるときだけです｡

See the Pen 回り込み float by hashi84 (@hashi84) on CodePen.

floatについては以下の記事で詳しく解説しています｡

以前は､グローバルメニューでの横並び､上下中央で使うこともありましたが､現在はflexで十分できます｡

使いどころはtableタグを使わず､dl,dt,ddで表をつくるときはtable-cellが使えると思います｡

これもflexでもできることなので､最近はあまり使いません｡

上下中央させることはできますが､折り返しさせることはできません｡

See the Pen 横並び　display:table-cell; by hashi84 (@hashi84) on CodePen.

display:grid;はまだ実案件で使用したことがありません｡

厳密には横並びとか縦並びとかではなく､自由に配置させることができるcssです｡

親要素にいろいろ指定するだけで他と同じような横並びにできました｡

新しい仕様なだけに使い勝手はよさそうです｡

ただ､こういった便利なcssは古いブラウザで使えないことが多いので実案件で使うときには､caniuseで確認したり､polyfillが必要ではないか確認する必要があります｡

See the Pen 横並び display:grid; by hashi84 (@hashi84) on CodePen.

polyfillについてはこちらの記事で解説しています｡