div要素を横並びに配置する方法

Q: 要素間の余白はmarginとgapのどちらで設定しますか?

Flexbox・CSS Gridのようなレイアウト内で兄弟要素間の間隔を均一に管理したい場合に向いているのが、gapプロパティを使う方法です。 一方で、コンテナの外側に余白を作りたい場合や特定の要素だけに個別の余白を設定したい場合は、従来通りmarginを使用します。用途に応じてgapとmarginを使い分けることが、レイアウトの意図を明確に保つポイントです。

公開：2026年7月31日更新：2026年7月31日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

div要素を横並びに配置したい場面は、ナビゲーションメニューの作成など、Webデザインの実装において、頻繁に発生します。現代のレイアウト手法としてよく使われるのが「Flexbox」や「CSS Grid」で、数行のコードを記述するだけで直感的な配置が可能です。

この記事では、div要素の横並びにおける基本的な使い方を解説していきます。古い手法であるfloatからモダンな手法への移行の位置付けやレスポンシブ対応までサンプルコード付きで解説していますので、ぜひ参考にしてください。

div要素を横並びに配置する方法
親要素にFlexboxを指定する
CSS Gridを利用して配置する
divの横並びをレスポンシブ対応させる手順
flex-wrapで折り返しを指定する
メディアクエリでカラム数を変更する
divの横並びが効かない時の対処法
親要素とFlexboxの指定を確認する
要素の幅指定を見直す
divの横並びに関するよくある質問
FlexboxとCSS Gridはどちらを使うべきですか?
要素間の余白はmarginとgapのどちらで設定しますか?

div要素を横並びに配置する方法

divを横並びにするモダンな手法として、現在はFlexboxまたはCSS Gridを使用するのが一般的です。

以前はfloatプロパティで横並びを実装する手法も広く使われていましたが、要素の高さがずれるなどの副作用を防ぐためにclearfixという追加の対応が必要でした。現在はこうした手間が少ないFlexboxやCSS Gridへの移行が推奨されています。

Flexboxについて、MDN Web Docsによる定義は次の通りです。

フレックスボックス (Flexbox) は、アイテムを行または列に並べるための 1 次元のレイアウト方法です。
出典:MDN Web Docs Flexboxの基本概念

つまり、Flexboxは横一列のような1方向の配置に特化した手法であるため、シンプルな横並びレイアウトに適しています。

それぞれの主な特徴と違いは、以下の通りです。

レイアウト手法	主な特徴	適している場面
Flexbox	1次元（横または縦方向）の配置に特化している	シンプルな横並びやナビゲーションメニュー
CSS Grid	2次元（縦横の両方向）の配置を同時に制御できる	複雑なグリッドレイアウトや全体の骨組み

レイアウトの目的や要素の数、対応したいブラウザの範囲に合わせて、FlexboxとCSS Gridのどちらかを選択すると、無駄なく効率的に配置を組み立てられます。

親要素にFlexboxを指定する

divを横並びにする最も基本的な方法は、親要素に対してFlexboxを指定することです。Flexboxを利用する際は、必ず子要素ではなく親要素に対して指定する必要があります。

Flexboxを利用して横並びにする使い方は、以下のコードを参考にしてください。

<style>
  .container {
    display: flex;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    margin-right: 10px;
  }
</style>
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

上記のコードでは、親要素であるcontainerクラスにFlexboxを適用し、子要素を横並びに配置しました。デフォルトでは左詰めで表示されますが、プロパティを追加して配置を調整することも可能です。

たとえば、公式ドキュメントで解説されているjustify-contentプロパティなどを組み合わせることによって、中央揃えや均等配置を簡単に指定できます。

CSS Gridを利用して配置する

より複雑なレイアウトを組みたい場合は、CSS Gridを利用してdivを配置する手法が有効です。要素を格子状に並べることを得意としており、横並びのデザインも簡潔に記述できます。

CSS Gridを利用した横並びの具体的な使い方は、以下のコードの通りです。

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .grid-box {
    background-color: #28a745;
    padding: 20px;
    text-align: center;
  }
</style>
<div class="grid-container">
  <div class="grid-box">A</div>
  <div class="grid-box">B</div>
  <div class="grid-box">C</div>
</div>

上記のコードでは、親要素にdisplay: grid;を指定し、列の数と幅を定義して横並びを実現しました。要素間の余白を設定する際は、gapプロパティを使用すると、コンテナ内の間隔を一元管理しやすくなります。

marginは外側の余白や特定要素だけの個別の余白を設定したい場合に適しており、コンテナ内の均一な間隔にはgapが向いています。用途によって、使い分けることがレイアウトの意図を明確に保つポイントです。

全体のレイアウトを細かく制御したい場面では、2次元で配置を管理できるCSS Gridの方が、Flexboxよりも柔軟な対応が期待できるでしょう。

Python研修一覧はこちら

目的に合うPython研修を一覧形式から探したい方は、ぜひご利用ください。

Python研修を比較する

Java研修一覧はこちら

目的に合うJava研修を一覧形式から探したい方は、ぜひご利用ください。

Java研修を比較する

PHP研修一覧はこちら

目的に合うPHP研修を一覧形式から探したい方は、ぜひご利用ください。

PHP研修を比較する

新入社員研修

目的に合う新入社員研修を一覧形式から探したい方は、ぜひご利用ください。

新入社員研修を比較する

全ての研修からも探したい方はこちら

divの横並びをレスポンシブ対応させる手順

divの横並びをスマートフォンのような狭い画面に対応させるには、折り返しやカラム数の変更が必要です。単に横並びにしただけでは、コンテンツが画面からはみ出したり縮みすぎたりする原因となります。

ここでは、CSSのFlexboxを用いたレスポンシブなレイアウトの構築手順を、flex-wrapとメディアクエリの2つの視点から解説する内容です。

flex-wrapで折り返しを指定する

画面幅が狭くなった際に要素を改行させるには、親要素にflex-wrapプロパティを指定します。デフォルトでは、ブラウザはすべての要素を1行に収めようとする仕様です。

以下のコードは、親要素に折り返しを指定して子要素の幅を保つ例を示しました。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 50%;
}

上記のコードでは、子要素の幅の合計が親要素を超える場合に自動で折り返して複数行です。これにより、要素のコンテンツが意図せず潰れてしまうのを防げます。

レスポンシブ対応を行う際は、子要素の幅をパーセンテージで指定し、画面サイズが変化しても崩れないレイアウトに整えるのが押さえておきたいポイントです。

メディアクエリでカラム数を変更する

デバイスのビューポート幅（ブラウザの表示領域の幅）に応じてカラム数（列数）を変えるには、メディアクエリ（@media）を使用します。PCでは3列、スマートフォンでは1列にするなどの調整が定番の手法です。

メディアクエリを用いてカラム数を変更する使い方は、以下の通りです。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 33.333%;
}
@media (max-width: 768px) {
  .item {
    width: 100%;
  }
}

上記のコードでは、ビューポート幅が768px以下になった際に子要素の幅を100%へ上書きしています。ここでの768pxはあくまで設計上のブレークポイントの一例であり、対象デバイスや設計方針に応じて調整が必要です。

このように記述することによって、スマートフォンでの閲覧時には自動で縦並びに切り替わり、画面幅に応じたレイアウト調整が可能です。

また、この切り替えを意図した通りに機能させるには、HTMLのhead内に<meta name="viewport" content="width=device-width, initial-scale=1">を指定しておく必要があります。viewportメタ要素がない場合、モバイル端末ではCSSピクセル幅が正しく評価されず、想定した幅でカラムが切り替わらない点に注意が必要です。

Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

divの横並びが効かない時の対処法

div要素の横並びが想定通りに機能しない場合は、CSSの指定箇所や幅の設定に原因があることがほとんどです。ここでは、よくある原因と具体的な対処法について解説します。

親要素とFlexboxの指定を確認する

div要素の横並びが効かない場合は、まず親要素にdisplay: flexが指定されているか、横並びにしたい要素がその直下の子要素になっているかを確認します。Flexboxでは、flexコンテナの直下の子要素だけがflexアイテムとして扱われる仕組みです。

あわせてflex-directionやflex-wrap、幅の指定に誤りがないかも確認しておく必要があります。以下のコードは、親要素の指定を見直す例です。

<style>
.container {
  display: flex; /* 親要素に指定する */
  flex-direction: row; /* 横並びにする方向 */
}
.item {
  width: 50%;
}
</style>
<div class="container">
  <div class="item">要素1</div>
  <div class="item">要素2</div>
</div>

上記のコードでは、親要素である.containerにFlexboxと横方向の指定を明示しています。子要素の.item自体にdisplay: flexを指定しても、その子要素が親から見てflexアイテムとして扱われる関係は変わりません。

子要素へのdisplay: flex指定は、その子要素の内側の要素をさらに横並びにしたい場合にのみ使う条件付きの指定です。横並びが崩れたときは、まず親要素の指定と直下の子要素の関係を最初に確認することをおすすめします。

要素の幅指定を見直す

flex-wrapの初期値はnowrapのため、子要素の幅の合計が親要素の幅を超えても、それだけで縦並びに変わるわけではありません。多くの場合はflex-shrinkによる自動縮小や要素が親要素からはみ出すオーバーフローとして現れます。

各要素のwidthの値や余白を含めた合計サイズを見直し、必要に応じてflex-wrap: wrapで折り返す設計に整えます。横幅の合計を調整し、要素を適切に配置する例は以下の通りです。

<style>
.container {
  display: flex;
  width: 100%; /* 親要素の幅 */
}
.item {
  width: 48%; /* 余白を考慮して50%未満に設定 */
  margin: 1%;
}
</style>
<div class="container">
  <div class="item">要素1</div>
  <div class="item">要素2</div>
</div>

上記のコードでは、子要素の幅を48%に設定し、左右の余白を含めて親要素に収まるよう調整しています。要素間の余白を設定する際は、全体の幅がはみ出さないように計算する設計です。

なお、flex-shrink: 0は要素の自動縮小を止める指定であり、折り返しやオーバーフロー対策と併用しないと、要素が親要素からはみ出す原因になるため注意しておく必要があります。