横並びレイアウトの作り方: float vs display vs Flexbox

2024-04-03

HTMLとCSSで2つのdivを横並びにする方法

float プロパティは、要素を左右に浮かせ、横並びにするために使用されます。以下のコードは、2つのdivを左側に並べる例です。

<div class="container">
  <div class="left">左側のdiv</div>
  <div class="right">右側のdiv</div>
</div>

.container {
  width: 100%;
}

.left, .right {
  float: left;
}

display プロパティは、要素の表示方法を指定するために使用されます。以下のコードは、2つのdivをインラインブロックとして表示し、横並びにする例です。

<div class="container">
  <div class="left">左側のdiv</div>
  <div class="right">右側のdiv</div>
</div>

.container {
  width: 100%;
}

.left, .right {
  display: inline-block;
}

Flexboxは、要素を柔軟にレイアウトするために使用できるCSSレイアウトモジュールです。以下のコードは、2つのdivをFlexboxを使って横並びにする例です。

<div class="container">
  <div class="left">左側のdiv</div>
  <div class="right">右側のdiv</div>
</div>

.container {
  display: flex;
}

.left, .right {
  flex: 1;
}

各方法の比較

方法	メリット	デメリット
`float` プロパティ	簡単	親要素の高さが崩れる可能性がある
`display` プロパティ	簡単	微調整が難しい
Flexbox	柔軟性が高い	コード量が少し多くなる

どの方法を使用するかは、それぞれの状況によって異なります。簡単なレイアウトであれば、float プロパティや display プロパティで十分です。より複雑なレイアウトや、微調整が必要な場合は、Flexboxを使うのがおすすめです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <style>
    /* 方法1: float */
    .container-float {
      width: 100%;
    }

    .container-float .left, .container-float .right {
      float: left;
    }

    /* 方法2: display */
    .container-display {
      width: 100%;
    }

    .container-display .left, .container-display .right {
      display: inline-block;
    }

    /* 方法3: Flexbox */
    .container-flex {
      display: flex;
    }

    .container-flex .left, .container-flex .right {
      flex: 1;
    }
  </style>
</head>
<body>
  <h1>方法1: float</h1>
  <div class="container-float">
    <div class="left">左側のdiv</div>
    <div class="right">右側のdiv</div>
  </div>

  <h1>方法2: display</h1>
  <div class="container-display">
    <div class="left">左側のdiv</div>
    <div class="right">右側のdiv</div>
  </div>

  <h1>方法3: Flexbox</h1>
  <div class="container-flex">
    <div class="left">左側のdiv</div>
    <div class="right">右側のdiv</div>
  </div>
</body>
</html>

このコードをブラウザで開くと、3つの方法で2つのdivが横並びになっていることを確認できます。

注意事項

上記のコードはあくまでもサンプルです。実際のレイアウトに合わせて、コードを調整する必要があります。
各方法の詳細については、上記の参考情報をご覧ください。

<div class="container">
  <div class="left">左側のdiv</div>
  <div class="right">右側のdiv</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

tableレイアウトは、要素を表格形式にレイアウトするために使用されます。以下のコードは、2つのdivをtableレイアウトを使って横並びにする例です。

<table>
  <tr>
    <td>左側のdiv</td>
    <td>右側のdiv</td>
  </tr>
</table>

<div class="container">
  <div class="left">左側のdiv</div>
  <div class="right">右側のdiv</div>
</div>

.container {
  position: relative;
}

.left {
  position: absolute;
  left: 0;
}

.right {
  position: absolute;
  right: 0;
}

方法	メリット	デメリット
CSS Grid	柔軟性が高い	ブラウザの対応状況がまだ完全ではない
tableレイアウト	簡単	セマンティック的に意味が異なる
positionプロパティ	微調整がしやすい	コード量が少し多くなる

どの方法を使用するかは、それぞれの状況によって異なります。最新のブラウザで使用できる場合は、CSS Gridを使うのがおすすめです。セマンティック的に意味のあるレイアウトであれば、tableレイアウトを使うのも良いでしょう。微調整が必要な場合は、positionプロパティを使うのがおすすめです。

html css