HTMLでdivを横に並べる方法【初心者でも崩れない実装】

HTMLでdivを横に並べたいと思っても、実際には思った位置に配置できない、途中で折り返される、スマホで崩れるといった悩みにぶつかりやすいものです。
特に、昔からある記述方法と現在よく使われる方法が混在しているため、何を選べばよいのか迷う方も少なくありません。

この記事では、divを横並びにする代表的な方法を整理しながら、HTMLとCSSの基本、Flexboxの実践、うまくいかないときの確認ポイントまで専門的に解説します。
これからレイアウトを組む方はもちろん、既存のコードを見直したい方にも役立つ内容です。

HTMLでdivを横に並べる基本と考え方

HTMLのdiv要素は、標準ではブロック要素として扱われます。
そのため、何も指定しなければ1つのdivが横幅いっぱいを使い、次のdivは下の行に配置されます。
つまり、divを横に並べたい場合は、HTMLそのものよりもCSSで表示方法を変更することが重要です。

現在の実務では、横並びの実装にFlexboxを使う場面が非常に多くなっています。
一方で、古いサイトやテーマではfloatやinline-blockが使われていることもあります。
そのため、今から学ぶなら最新の主流を理解しつつ、既存コードを読めるように旧来の方法も把握しておくと安心です。

divが初期状態で横に並ばない理由

divはブロックレベル要素であるため、通常の文書フローでは前後に改行が入るように表示されます。
これは、段落やセクションのようにまとまりを作るための性質であり、仕様として自然な動作です。
したがって、横並びにしたいのに並ばないのは不具合ではなく、初期設定のままだからです。

この性質を変えるには、親要素にdisplay:flexを指定する、子要素をinline-blockにする、あるいはfloatを使う方法があります。
ただし、方法ごとに余白の扱い、揃えやすさ、保守性が異なるため、単に並べるだけでなく、どの場面で使うのが適切かまで理解して選ぶことが大切です。

HTMLとCSSの役割を分けて考える

初心者の方が混乱しやすい点として、HTMLだけで横並びにしようとしてしまうケースがあります。
しかし、HTMLは構造を表し、見た目や配置はCSSが担当するという役割分担で考えると理解しやすくなります。
divを複数並べるHTMLを書いただけでは、横並びは成立しません。

たとえば、カード一覧、2カラム、ボタンの横配置などは、HTMLで要素をグループ化し、CSSで親子関係に応じたレイアウトを指定します。
この考え方を押さえると、後からデザイン変更がしやすくなり、WordPressのテーマ編集やブロック内のカスタムHTMLでも対応しやすくなります。

現在主流なのはFlexbox

複数のdivを横に並べる方法の中でも、現在もっとも扱いやすいのがFlexboxです。
親要素に指定するだけで、子要素を横方向に並べられ、中央揃え、間隔調整、折り返し制御までまとめて管理できます。
そのため、新規制作ではまずFlexboxを第一候補にするとよいでしょう。

特に、横幅が異なる要素を並べる場面や、スマホでは縦並びに切り替えたい場面で強みがあります。
一方で、表のような二次元レイアウトではGridのほうが向く場合もあります。
ただし、今回のようにdivを横に並べるテーマでは、Flexboxの理解が最優先です。

divを横並びにする主な方法の違い

divの横並びには複数の実装方法がありますが、どれを使っても同じというわけではありません。
コードの読みやすさ、余白調整のしやすさ、スマホ対応の柔軟性には差があります。
そのため、特徴を比較してから選ぶことで、後の修正コストを大きく減らせます。

特にWordPressでは、過去のテンプレートに古い記述が残っていることもあるため、違いを知っておく価値があります。
以下の表で、代表的な方法を整理します。

floatを使う方法

floatは本来、画像の回り込みなどを実現するための仕組みですが、以前は横並びレイアウトにも広く使われていました。
leftを指定すれば左から順に並びますが、親要素の高さが消える問題や、clearの調整が必要になる場面があります。
そのため、今から新規に採用する優先度は高くありません。

ただし、既存テーマの修正では今も見かけます。
古いコードを読む際には、子要素のfloatだけでなく、親要素にclearfix相当の処理があるか確認することが重要です。
理解しておけば、古いレイアウトの保守でも慌てず対応できます。

inline-blockを使う方法

inline-blockは、ブロック要素の幅や高さを保ちながら、文章のように横方向へ並べられる方法です。
比較的わかりやすい一方で、HTML上の改行やスペースが要素間の隙間として表示されることがあり、見た目がずれる原因になります。
少数の要素を簡単に横並びしたい場合には使えます。

ただし、均等配置や縦方向の中央揃え、柔軟な折り返しは得意ではありません。
そのため、ナビゲーションや小さなパーツでは成立しても、複雑なカードレイアウトには不向きです。
学習用として理解しつつ、実務ではFlexboxへ移行する考え方が自然です。

Flexboxを使う方法

Flexboxは、親要素にdisplay:flexを指定し、その中の子要素を一列に並べる仕組みです。
justify-contentで横方向、align-itemsで縦方向の整列を制御でき、gapで要素間の余白も管理できます。
コードが整理しやすく、読み返したときにも意図が伝わりやすいのが大きな利点です。

さらに、flex-wrapを使えば横幅が足りないときに自然に折り返せます。
これにより、PCでは横並び、狭い画面では複数行という実装が簡単になります。

FlexboxでHTMLのdivを横に並べる実践手順

実際の制作では、理論だけでなく最小構成の考え方を知っておくと応用しやすくなります。
Flexboxは親要素と子要素の関係を理解すれば扱いやすく、2カラム、3カラム、カード一覧など多くのレイアウトに応用できます。
ここでは、導入時に押さえておきたいポイントを順番に整理します。

特に重要なのは、横並びにしたいdivを包む親要素に指定を書くことです。
子要素だけを触っても期待通りにならないことがあるため、どこに何を書くかを明確にしましょう。

親要素にdisplay flexを指定する

Flexboxの基本は、親要素にdisplay:flexを設定することから始まります。
これにより、その直下の子要素が横方向の並びとして扱われます。
まずは最小限の構造で動作を確認し、その後に幅や余白を調整する流れが失敗しにくいです。

また、横並びにしたい要素がさらに別の要素で包まれている場合、想定している子要素がflexアイテムになっていないことがあります。
WordPressではブロック構造が一段深くなっていることもあるため、ブラウザの検証機能で親子関係を確認する習慣を持つと効率的です。

幅と余白を調整して整える

横並びにできても、各divの幅が不揃いだったり、要素同士が密着して見えたりすると完成度が下がります。
そのため、子要素にflex:1を使って均等幅にしたり、widthで固定幅を与えたりして見た目を整えます。
余白にはmarginも使えますが、現在はgapの活用がわかりやすいです。

gapを使うと、個々の子要素に余白指定をばらばらに書かずに済むため、保守性が高まります。
カードUIやボックス配置では、見た目の一貫性が出しやすくなります。
レイアウト調整は、幅、余白、折り返しの3点をまとめて見ることが大切です。

折り返しとスマホ表示を考慮する

PCでは横一列でも、スマホでは画面幅が足りず窮屈になることがあります。
そのため、flex-wrap:wrapを使って自然に折り返せるようにするか、画面幅に応じて縦並びへ切り替える設計が有効です。
横並びの成功は、広い画面だけでなく狭い画面でも読みやすいことが条件です。

特に、文字量の多いボックスは無理に横並びを維持すると可読性が落ちます。
スマホ閲覧が中心のページでは、一定幅以下で縦並びに切り替える発想が自然です。
最新情報に基づく実装では、レスポンシブ対応を前提に組むことが欠かせません。

divが横に並ばないときの原因と対処法

指定したはずなのにdivが横に並ばない場合、原因は1つではありません。
親子関係の勘違い、幅の合計オーバー、別のCSSの上書き、WordPressテーマ側の既存スタイルなど、複数の要因が絡むことがあります。
そのため、感覚で直すのではなく、順番に切り分けることが大切です。

特に初心者の方は、子要素にだけ指定を足し続けて状況が悪化することがあります。
まずは親要素のdisplay、子要素の幅、外側の余白、折り返し設定を確認していくと原因に近づきやすくなります。

幅の合計が親要素を超えている

たとえば、子要素を3つ並べたいのに、それぞれに幅を40パーセントずつ指定すると、合計が100パーセントを超えて折り返されます。
さらにpaddingやborder、marginが加わると、見た目以上に幅を消費するため注意が必要です。
横並びできないときは、まず合計幅が収まっているかを確認しましょう。

この問題を減らすには、box-sizingの考え方を理解し、必要に応じて幅計算を簡潔にすることが有効です。
また、均等幅ならflex:1、固定数カラムならgap込みで設計する方法が扱いやすいです。
数値を足しながら配置を考える癖をつけると、崩れにくいコードになります。

別のCSSに上書きされている

WordPressでは、テーマやプラグイン、ブロックエディター由来のCSSがすでに多数読み込まれていることがあります。
そのため、自分で書いたdisplay:flexが効かないように見えても、実際には別の指定でdisplay:blockへ上書きされている場合があります。
このようなときは、検証機能で最終的に適用されているCSSを確認するのが近道です。

クラス名が一般的すぎると他のスタイルと衝突しやすいため、用途がわかる名前を付けることも有効です。
また、必要以上に!importantへ頼ると後の保守が難しくなるため、まずは詳細度や読み込み順を見直すほうが安全です。
横並びの不調は、指定ミスではなく競合が原因のことも少なくありません。

確認時に見るべきポイント

原因を切り分けるときは、確認項目を固定すると効率が上がります。
思いつきで修正するより、親から子へ順番に見るほうが再現性があります。
特に次の観点は、実務でも頻繁に使う基本です。

• 親要素にdisplay:flexが付いているか
• 横並びにしたい要素が親の直下にあるか
• 子要素の幅と余白の合計が大きすぎないか
• flex-wrapの有無で折り返していないか
• 別スタイルでdisplayやwidthが上書きされていないか

この順で見ていけば、多くの問題は整理できます。
見た目だけで判断せず、HTML構造とCSS適用結果をセットで確認することが、安定した修正につながります。

まとめ

HTMLでdivを横に並べるには、まずdivが初期状態では縦に積み重なるブロック要素であることを理解し、そのうえでCSSで表示方法を変える必要があります。
方法はいくつかありますが、現在の主流はFlexboxであり、配置、余白、折り返し、スマホ対応までまとめて扱いやすいのが強みです。

また、うまく並ばないときは、親要素の設定、子要素の幅、余白の合計、CSSの上書きといった観点で順番に確認することが重要です。
WordPressでは既存スタイルの影響も受けやすいため、構造と適用結果を冷静に見直す姿勢が役立ちます。
迷ったときは、まずFlexboxを基本にしてシンプルな構成から組み立てると、崩れにくく保守しやすいレイアウトを作れます。