【HTML・CSS】2カラムレイアウトのwebページのつくり方

CSS
2022.12.04

この記事では、2列で構成されたレイアウトのwebページを、HTMLとCSSでつくる方法について説明します。

つぎの画像は、2カラムレイアウトで構成されたwebページの例です。
2つのカラムが色分けされて、左側と右側で並べています。

2カラムレイアウト

この画像を表現するためのコードは、次のようになります。

See the Pen
2カラムレイアウト by aiiro (@aiiro29)
on CodePen.

以降では、このコードの説明していきます。

スポンサーリンク

2カラムレイアウト用のHTMLを用意する


<html>
  <body>
    <div class="container">
      <div class="left-column">
        左側のカラムのコンテンツ
      </div>
      <div class="right-column">
        右側のカラムのコンテンツ
      </div>
    </div>
  </body>
</html>

2つのカラムを内包するcontainerクラスを設定したdivタグを用意します。
そして、その中に左側と右側のカラムのコンテンツを配置するdivタグを追加し、それぞれにleft-columnクラスとright-columnクラスを設定します。

flexboxを使って2カラムレイアウト用のCSSを設定する

つぎは、上記で用意したHTMLに対してCSSを設定します。

.container {
  display: flex;  
  flex-direction: row;
  height: 200px;
}

.left-column {
  flex: 1;
  background: lightblue;
}

.right-column {
  flex: 1;
  background: lightgreen;
}

2カラムレイアウトを表現するために、フレックスボックスを使うことにします。

2つのカラムを含む親要素の、containerクラスを持つdivタグに、「display: flex;」を設定し、さらに、「flex-direction: row;」を設定します。
flex-direction属性にrowを設定することで、内包される2つのカラムを横に並べることができます。

left-columnとright-columnクラスには、「flex: 1;」を設定します。
これによって、containerクラス内で、それぞれのカラムが同じ幅になります。

flex属性についてのドキュメント
https://developer.mozilla.org/ja/docs/Web/CSS/flex

他に3カラムレイアウトのつくり方を、つぎのページで説明していますので、よろしければご参考ください。
【HTML・CSS】3カラムレイアウトのwebページのつくり方

スポンサーリンク