ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

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

「要素を横並びにするにはどうすればいいの?」

「横並びにする方法はひとつだけではないけど、どれを使えばいいの?」

悩み

HTMLコーディングを知らない人、初級者の人から、こんな質問をうけることが多いです。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

そこで、この記事では、要素を横並びにする方法を、実際のHTML、CSSのコード、デモを使って解説しています。

この記事を読めば、要素を横並びにする5つの方法、また、その中でもどれを使えばいいかがわかります。

目次
  1. 要素を横並びにする方法
    1. 親要素にdisplay:flex;
    2. 要素にdisplay:inline-block;
    3. 要素にfloat:left;
    4. 要素にdisplay:table-cell;
    5. 親要素にdisplay:grid;
  2. まとめ

要素を横並びにする方法

2020年、横並びさせる方法で一番いい選択肢はdisplay:flex;です。
2018年くらいからはほぼflexのみです。
厳密には横並びだけでなく、縦並びにも使える方法で、使い勝手がとてもいいです。

親要素にdisplay:flex;

display:flex;で一番混乱しやすいところは、横並びさせたい要素そのものにcssを指定するのではなく、親要素にflexを指定するところです。
でも、慣れるととても便利です。
他の要素のコーディングでも指定したい要素だけでなく、親要素を意識しながらコーディングしていく、幅が広がって効率よくコーディングすることができます。

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

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

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

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

要素にdisplay:inline-block;

display:inline-block;はflexとは逆に親要素をほとんど意識しなくてすむので違う意味で使いやすいです。
デメリットはなぜか並べた右側に小さな余白ができるので例につくったような背景がある要素には使えないです。

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

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

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

要素にfloat:left;

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

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.

要素にdisplay:table-cell;

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

使いどころはtableタグを使わず、dl,dt,ddで表をつくるときはtable-cellが使えると思います。
これもflexでもできることなので、最近はあまり使いません。

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

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

親要素にdisplay:grid;

display:grid;はまだ実案件で使用したことがありません。
厳密には横並びとか縦並びとかではなく、自由に配置させることができるcssです。

親要素にいろいろ指定するだけで他と同じような横並びにできました。
新しい仕様なだけに使い勝手はよさそうです。

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

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

まとめ

要素を横並びにする方法を紹介しました。

現状、display:flex;だけでもだいたい問題ないと思います

今後、IEのシェアが下がってくると、display:grid;が主流になってくるかもしれません。

対応しないといけないブラウザ・バージョンや、ブラウザシェアを気にしながら使用する方法を選択していきましょう。