「要素を横並びにするにはどうすればいいの？」
「横並びにする方法はひとつだけではないけど､どれを使えばいいの？」
HTMLコーディングを知らない人､初級者の人から､こんな質問をうけることが多いです｡
私は､2015年頃からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡
そこで､この記事では､要素を横並びにする方法を､実際のHTML､CSSのコード､デモを使って解説しています｡
この記事を読めば､要素を横並びにする5つの方法､また､その中でもどれを使えばいいかがわかります｡
横並びリストを個数が変わっても均等幅に並べる方法は以下の記事で解説しています｡
HTML横並びリストを均等幅に！個数が変わってもCSSそのまま
グローバルメニューなどを簡単に均等幅にしたいですか？この記事では、メニューの個数が変わっても、CSSの数値を変更せずに均等幅にする方法を紹介しています。。ぜひご覧ください。
- 目次
要素を横並びにする方法
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とは逆に親要素をほとんど意識しなくてすむので違う意味で使いやすいです｡
デメリット改行を含めると並べた右側に小さな余白ができるので例につくったような背景がある要素には使えないです｡
横幅を超えると折り返しされるので､一覧ページでも使うことはできますが､謎の余白には注意が必要です｡
この右側の余白を回避するには､HTMLソースを改行せずにすべて横並びで書く必要があります｡
ソースが見にくくなるので､数が多くなるとあまり現実的ではありませんが､ツールを使ってリアルタイムにHTMLソースを整理できる場合はこの方法でもいいかもしれません｡
上下中央にするにはもうひとつ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.
floatについては以下の記事で詳しく解説しています｡
【CSS】floatって必要？メリット、デメリット、使い方を解説
CSSのfloatについて知りたいですか？この記事では、CSSのfloatとは、floatのメリット・デメリット、floatの使い方について解説しています。ぜひご覧ください。
要素に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.
polyfillについてはこちらの記事で解説しています｡
IEでも使いたい！polyfillを使えばIE11でも使える便利CSS 4選 + 1
IEでも便利なCSSを使いたいですか？この記事では、IE11に対応していないobject-fit、position:sticky;、CSS変数など、polyfillというJavaScriptを使ってIE11に対応させることができるCSSをまとめています。ぜひご覧ください。
Web制作､コーディングでおしゃれなデザインを実現するのにおすすめの書籍です｡
CSSを使って動きのあるWebサイトをつくることもできるようになります｡
まとめ
要素を横並びにする方法を紹介しました｡
現状､display:flex;だけでもだいたい問題ないと思います
今後､IEのシェアが下がってくると､display:grid;が主流になってくるかもしれません｡
対応しないといけないブラウザ･バージョンや､ブラウザシェアを気にしながら使用する方法を選択していきましょう｡
CSSで縦並びリストを折り返して複数列にする方法を以下の記事で解説しています｡
CSSで縦並びリストを折り返して複数列にする方法を知りたいですか？この記事では、縦並びリストを折り返す方法として「column-count」「flex」「jQuery」を使った方法を解説しています。ぜひご覧ください。
