CSSで2つのdivを横並びに表示する3つの方法（float・Flexbox・CSS Grid）

CSSを使ってHTMLのdiv要素を横並びに配置する方法は主に3つあります。この記事では、それぞれの方法を実際のコード例とともにわかりやすく解説します。

（クリックすると各セクションにジャンプできます）

• floatを使う方法
• Flexboxを使う方法
• CSS Gridを使う方法

floatを使う方法

float方式では、次のようなHTMLマークアップを使用します。

<div class="float-container">

  <div class="float-child">
    <div class="green">Float Column 1</div>
  </div>
  
  <div class="float-child">
    <div class="blue">Float Column 2</div>
  </div>
  
</div>

.float-containerは、2つの.float-child要素を内包する親要素です。

divを横並びにするために、以下のCSSルールを適用します。

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}  

このコードの表示結果は以下のようになります。

動きがひと目でわかるように、divにボーダーとパディングを追加しています。外側の太い白いボーダーが.float-containerで、20pxのパディングを持っています。

そして、各.float-child要素には細めの赤いボーダーとパディングが設定されています。実際のカラーブロックは、その.float-child要素の子要素になっています（理由は後ほど説明します）。

divを横並びにするポイントは、floatプロパティを使って各.float-child要素を左にフロートさせることです。

どちらも左にフロートしているため、両方が収まる十分なスペースがあれば横並びで表示されます。ここでは2つの.float-childがそれぞれ幅50%なので、きちんと収まっています。

div間のスペースは、各.float-childにパディングを追加することで作られ、その中にカラーブロックが配置されます。

外側のdivで各カラムを囲んで余白を作る

カラーブロック間に余白を作りつつ、両方のブロックを横並びに収めるためには、色ブロックを外側のdiv（.float-child）で囲む必要があります。

では、もし.float-childにパディングを設定せず、代わりに最初のブロックにmargin-rightを指定して余白を作ろうとしたらどうなるでしょうか。

HTML：

<div class="float-container">

  <div class="float-child green">
    Float Column 1
  </div>
  
  <div class="float-child blue">
    Float Column 2
  </div>
  
</div>

CSS：

.float-child.green {
    margin-right: 20px;
}

この場合、両方の.float-child要素は全体の幅の50%ずつを占めます。しかし、最初の緑の要素にはさらに20pxのマージンが加わります。

つまり、両ブロックの合計幅は「50% + 20px + 50%」となり、100%を20px超えてしまいます。これでは両方を横並びにするスペースが足りません。

その結果、2つ目の青いブロックは1つ目のブロックの下の行に折り返され、そこで左にフロートします。

幅を48%など50%未満の数値に調整して収まるようにすることも可能ですが、正確なレイアウトにはなりません。

だからこそ私は、ブロックを幅50%の外側のdivで囲み、パディングでdiv間の余白を作る方法を好んで使っています。

なお現在では、floatよりも新しいCSSの手法を使ってdivを横並びにする方が簡単です。

それでは、そのうちの1つであるFlexbox方式を見てみましょう。

Flexboxを使う方法

Flexboxを使えば、より直感的な方法で2つのdiv要素を揃えることができます。

HTML：

<div class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>

CSS：

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

Flexboxでは、親要素の.flex-containerにdisplay: flexを設定します。これでFlexboxが有効になります。

次に、各.flex-child要素にflex: 1を設定します。この数値は、親のフレックス要素内における各子要素の幅の比率のようなものです。

両方同じ値なので、利用可能なスペースは均等に分割されます。子要素が2つあるため、それぞれ50%ずつ占めることになります。

このコードの表示結果は以下のようになります。

マージンで余白を作っても、レイアウトは崩れない！

注目すべきは、最初の.flex-child要素だけにmargin-right: 20pxを追加して余白を作っている点です。それでもFlexboxは賢いので、残りの利用可能な幅を分割する際に、その余分な20pxも考慮してくれます。

つまり、ピクセル数を正確に計算しなくても、マージンだけで余白を追加できるのです。Flexboxがコンテンツを自動的に調整してくれます。

これこそが、私がFlexboxを愛用する大きな理由の1つです。

ただし、複数の要素をレスポンシブなグリッドでレイアウトしたい場合、どこに余白を追加すべきか常にわかるとは限りません。

今回の例で言えば、モバイル画面で2つのdivを縦に積みたい場合、モバイル幅ではmargin-rightプロパティを解除する必要があります。

あるいは、float方式で行ったように、各.flex-childに対して追加の外側要素とパディングを設けることもできます。

完全に直感的というわけではありませんが、それでも問題なく機能します。Flexboxでより複雑なレスポンシブレイアウトを作成する場合は、この点に留意しておきましょう。

続いて、divを横並びにするための最新の手法、CSS Gridを見てみましょう。

CSS Gridを使う方法

CSS Gridを使って2つのdivを横並びにする方法は以下の通りです。

HTML：

<div class="grid-container">

    <div class="grid-child purple">
        Grid Column 1
    </div>

    <div class="grid-child green">
        Grid Column 2
    </div>
  
</div>

CSS：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

このコードの表示結果は以下のようになります。

Gridの大きな特徴は、まずグリッドテンプレートの形を決めるところから始まる点です。つまり、レイアウトに何列・何行のグリッドを作りたいかを先に定義します。

今回のケースでは、等幅の2列を作りたいので、親要素の.grid-containerにdisplay: gridを設定してGridを有効にします。次に、grid-template-columnsプロパティで列構成を指定します。

等幅の2列にしたいので、1fr 1frと設定します。これはブラウザに対し、「2列のレイアウトを作成し、各列が1fr（fr = 分数単位）のスペースを占める」ことを指示します。

fr単位は、Flexbox方式で使ったflex: 1と同様に、列同士の比率を表します。1fr 1frと設定すれば、各列が同じスペースを占めることになります。

grid-gapプロパティでグリッドアイテム間に余白を追加する

CSS Gridを使う大きなメリットの1つは、グリッドアイテム間の余白を作るのにパディングやマージンが不要なことです。

grid-gap（新しいブラウザではgap）を使えば、グリッドテンプレートに自動的に余白を追加できます。

ここではgrid-gapを20pxに設定しているので、ブラウザはすべてのアイテム間に20pxのスペースを追加します。アイテムが横並びの場合でも縦積みの場合でも同様です。

またお気づきかもしれませんが、Gridに関するCSSプロパティはすべて親要素の.grid-containerに設定されています。子要素の.grid-childには、CSSを一切書く必要がなかったのです！