HTMLとCSSで実現！中央に可変幅列を配置する固定幅列2つとのレイアウト方法

2024-04-23

HTML、CSS、Flexbox を使って中央に可変幅列を配置する固定幅列2つを作成する方法

HTML、CSS、Flexbox を駆使することで、中央に可変幅列を配置しつつ、左右に固定幅列を配置することができます。このレイアウトは、様々なウェブサイトやウェブアプリケーションでよく用いられ、情報の見やすさや操作性を向上させるのに役立ちます。

ステップ

HTML 構造

<div class="container">
  <div class="fixed-width-column left">固定幅列 左側</div>
  <div class="flexible-column">可変幅列 中央</div>
  <div class="fixed-width-column right">固定幅列 右側</div>
</div>

上記のように、container クラスの div 要素の中に、fixed-width-column と flexible-column クラスの div 要素を配置します。それぞれ left、center、right のテキストコンテンツを含めます。

CSS スタイル

.container {
  display: flex; /* Flexbox レイアウトを有効化 */
}

.fixed-width-column {
  flex: 0 0 200px; /* 幅を固定 (200px) */
}

.flexible-column {
  flex: 1 1 auto; /* 可変幅 */
}

上記のように、CSS を使って以下の設定を行います。

.container に display: flex を設定し、Flexbox レイアウトを有効化します。
.fixed-width-column に flex: 0 0 200px を設定し、幅を 200px に固定します。
.flexible-column に flex: 1 1 auto を設定し、残りのスペースを可変幅として使用できるようにします。

補足

上記は基本的な例であり、実際の状況に合わせて調整が必要となる場合があります。

例

上記のコードを用いて作成したウェブサイトは、以下のようになります。

Flexbox レイアウトは、メディアクエリを用いて、様々な画面サイズに柔軟に対応させることができます。
Flexbox レイアウトは、CSS Grid レイアウトと組み合わせて、より複雑なレイアウトを作成することもできます。

サンプルコード：HTMLとCSS

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定幅列と可変幅列を並べる</title>
  <style>
    .container {
      display: flex; /* Flexbox レイアウトを有効化 */
    }

    .fixed-width-column {
      flex: 0 0 200px; /* 幅を固定 (200px) */
      background-color: #ccc; /* 背景色 */
      padding: 10px; /* 余白 */
      text-align: center; /* 中央揃え */
    }

    .flexible-column {
      flex: 1 1 auto; /* 可変幅 */
      background-color: #f0f0f0; /* 背景色 */
      padding: 10px; /* 余白 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed-width-column">固定幅列 左側</div>
    <div class="flexible-column">可変幅列 中央</div>
    <div class="fixed-width-column">固定幅列 右側</div>
  </div>
</body>
</html>

CSS

.container {
  display: flex; /* Flexbox レイアウトを有効化 */
}

.fixed-width-column {
  flex: 0 0 200px; /* 幅を固定 (200px) */
  background-color: #ccc; /* 背景色 */
  padding: 10px; /* 余白 */
  text-align: center; /* 中央揃え */
}

.flexible-column {
  flex: 1 1 auto; /* 可変幅 */
  background-color: #f0f0f0; /* 背景色 */
  padding: 10px; /* 余白 */
}

説明

CSS コードでは、以下の設定を行っています。

結果

上記コードを実行すると、以下のようになります。

この例では、左右の列の幅を 200px に固定し、中央の列を可変幅に設定しています。
それぞれの列のスタイルは、必要に応じて変更することができます。

HTMLとCSS以外で中央に可変幅列を配置する他の方法

CSS Grid Layout は、Flexbox と同様に、Web ページのレイアウトを構築するための強力なツールです。Flexbox と異なり、Grid Layout はより多くの柔軟性と制御性を提供します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout を使用して中央に可変幅列を配置する</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 200px 1fr 200px; /* 左側、中央、右側列の幅を設定 */
      gap: 10px; /* 列間の余白 */
    }

    .fixed-width-column {
      background-color: #ccc; /* 背景色 */
      padding: 10px; /* 余白 */
      text-align: center; /* 中央揃え */
    }

    .flexible-column {
      background-color: #f0f0f0; /* 背景色 */
      padding: 10px; /* 余白 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed-width-column">固定幅列 左側</div>
    <div class="flexible-column">可変幅列 中央</div>
    <div class="fixed-width-column">固定幅列 右側</div>
  </div>
</body>
</html>

HTML コードは、Flexbox の例とほぼ同じです。
CSS コードでは、以下の設定を行っています。
- grid-template-columns プロパティを使用して、列の幅を設定します。この例では、左右の列を 200px に固定し、中央の列を可変幅に設定しています。
- gap プロパティを使用して、列間の余白を設定します。

上記コードを実行すると、Flexbox の例と同様の結果になります。

方法 2：テーブル

テーブルは、Web ページのレイアウトを構築するための古典的な方法ですが、アクセシビリティの問題があるため、現在ではあまり推奨されていません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルを使用して中央に可変幅列を配置する</title>
  <style>
    table {
      width: 100%; /* テーブルの幅を100%に設定 */
      border-collapse: collapse; /* セルの境界線を非表示 */
    }

    th, td {
      padding: 10px; /* セルの余白 */
      border: 1px solid #ccc; /* セルの境界線 */
      text-align: center; /* 中央揃え */
    }

    .fixed-width-column {
      width: 200px; /* セルの幅を固定 */
    }

    .flexible-column {
      width: auto; /* セルの幅を可変に設定 */
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th class="fixed-width-column">固定幅列 左側</th>
      <th class="flexible-column">可変幅列 中央</th>
      <th class="fixed-width-column">固定幅列 右側</th>
    </tr>
  </table>
</body>
</html>