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

2022.12.06

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

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

3カラムレイアウト

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

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

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

スポンサーリンク

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

<html>
  <body>
    <div class="container">
      <div class="left-column">
        左カラム
      </div>
      <div class="center-column">
        中央カラム
      </div>
      <div class="right-column">
        右カラム
      </div>
    </div>
  </body>
</html>

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

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

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

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

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

.center-column {
  flex: 1;
  background: lightyellow;
}

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

3カラムレイアウトを表現するために、フレックスボックスを使います。

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

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

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

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

スポンサーリンク