• Home
  • Web制作
  • 【初心者向け】HTMLで3カラムレイアウトを作る基本テクニックを徹底解説！

【初心者向け】HTMLで3カラムレイアウトを作る基本テクニックを徹底解説！

schedule update
Tags: HTML

はじめに

Webページのレイアウトにおいて、3カラムレイアウトは多くの情報を整理して表示できるため、大変人気があります。ブログのデザインやECサイトの商品一覧など、幅広い場面で活用されていますね。

しかし、HTMLやCSSの知識がないと、どのように3カラムレイアウトを作成すればよいかわからない方もいるかもしれません。

そこで今回は、初心者の方でも理解しやすいように、HTMLで3カラムレイアウトを作る代表的な方法を3つ、具体的なコード例とともにご紹介します。

1. floatプロパティで3カラムを作る方法

floatプロパティは、要素を左または右に浮かせることができるCSSのプロパティです。3つのカラム要素それぞれにfloatプロパティを適用することで、横並びに配置し、3カラムレイアウトを実現できます。

floatプロパティを用いた3カラムレイアウトの特徴

  • 比較的シンプルなコードで実装できるため、初心者の方でも扱いやすい
  • 古いブラウザにも対応しているため、幅広い環境で表示できる

floatプロパティを用いた3カラムレイアウトの注意点

  • 親要素の高さが collapsing する場合があるため、対策が必要になるケースがある

floatプロパティを用いた3カラムレイアウトのコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3カラムレイアウト</title>
  <style>
    .container {
      overflow: hidden; /* collapsing対策 */
    }

    .column {
      width: 30%;
      float: left;
      margin: 1%;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <h2>カラム1</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
    <div class="column">
      <h2>カラム2</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
    <div class="column">
      <h2>カラム3</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
  </div>
</body>
</html>

2. flexboxで3カラムを作る方法

flexboxは、要素を柔軟に配置するためのCSSのレイアウトモジュールです。flexboxを使うことで、3つのカラムを均等に配置したり、順番を変更したり、レスポンシブに対応したレイアウトを簡単に作成できます。

flexboxを用いた3カラムレイアウトの特徴

  • 柔軟なレイアウトを実現できるため、複雑なデザインにも対応できる
  • レスポンシブデザインとの相性が良い
  • floatプロパティで発生する collapsing の問題を回避できる

flexboxを用いた3カラムレイアウトのコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3カラムレイアウト</title>
  <style>
    .container {
      display: flex;
    }

    .column {
      width: 30%;
      margin: 1%;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <h2>カラム1</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
    <div class="column">
      <h2>カラム2</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
    <div class="column">
      <h2>カラム3</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
  </div>
</body>
</html>

3. Grid Layoutで3カラムを作る方法

Grid Layoutは、2次元のグリッドシステムを用いて、より複雑なレイアウトを作成できるCSSのレイアウトモジュールです。Grid Layoutを使うことで、行と列を定義し、要素をそれぞれのグリッドセルに配置できます。

Grid Layoutを用いた3カラムレイアウトの特徴

  • より複雑なレイアウトを簡単に実現できる
  • レスポンシブデザインとの相性が良い

Grid Layoutを用いた3カラムレイアウトのコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3カラムレイアウト</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1%;
    }

    .column {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <h2>カラム1</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
    <div class="column">
      <h2>カラム2</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
    <div class="column">
      <h2>カラム3</h2>
      <p>ここにコンテンツが入ります。</p>
    </div>
  </div>
</body>
</html>

まとめ｜HTMLで3カラムレイアウトを作成する方法をマスターしよう！

今回は、HTMLで3カラムレイアウトを作成する3つの方法をご紹介しました。それぞれの方法に特徴があるので、ご自身のWebサイトのデザインや目的に合わせて最適な方法を選んでみてください。

3カラムレイアウトは、Webサイトに様々な情報を効果的に表示する上で非常に便利なレイアウトです。今回の記事が、HTMLで3カラムレイアウトを実装する際の参考になれば幸いです。

関連記事