flexbox、calc、CSS Grid、JavaScript：4つの方法で残りの幅を自動的に埋めるdiv展開

2024-04-02

HTML、CSS、複数カラムにおける「残りの幅を埋めるdivの展開」

Webページレイアウトにおいて、カラムレイアウトは情報整理に役立ちます。しかし、カラム幅を固定すると、画面サイズによってはコンテンツが余白に埋もれてしまったり、逆に余白が大きすぎて見栄えが悪くなったりすることがあります。

そこで、この解説では、div要素を使い、残りの幅を自動的に埋める方法について、HTML、CSS、複数カラムの観点から詳細に説明します。

HTML

まず、以下のHTMLコードのように、div要素でカラム構造を構築します。

<div class="container">
  <div class="left-column">
    ... 左側のコンテンツ ...
  </div>
  <div class="right-column">
    ... 右側のコンテンツ ...
  </div>
</div>

上記例では、.containerという親div要素の中に、.left-columnと.right-columnという子div要素を配置しています。それぞれのdiv要素には、左右のコンテンツを記述します。

CSS

次に、以下のCSSコードのように、.containerと.right-columnにスタイルを適用します。

.container {
  display: flex;
  width: 100%;
}

.left-column {
  width: 300px;
}

.right-column {
  flex: 1;
}

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

.container:
- display: flex: flexboxレイアウトを適用
- width: 100%: 親要素の幅いっぱいに広げる
.left-column:
.right-column:
- flex: 1: 残りの幅をすべて占める

複数カラム

上記コードでは、2カラムレイアウトの例を示しましたが、3カラム以上の場合も同様の方法でflexプロパティを用いて、各カラムの幅を調整できます。

例えば、3カラムレイアウトの場合は、以下のように記述します。

.center-column {
  flex: 2;
}

上記コードでは、.center-columnにflex: 2を指定することで、左右のカラムの2倍の幅を割り当てます。

注意点

flexboxレイアウトは、IE10以前のブラウザではサポートされていないため、古いブラウザへの対応が必要な場合は、別の方法を検討する必要があります。
flexプロパティは、子要素の順番に影響を与えるため、意図しないレイアウトにならないよう注意が必要です。

応用

min-widthやmax-widthプロパティを用いて、カラム幅の最小値や最大値を設定できます。
marginやpaddingプロパティを用いて、カラム間の余白を調整できます。
メディアクエリを用いて、画面サイズに応じてカラムレイアウトを切り替えることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="left-column">
      <h1>左側</h1>
      <p>ここに左側コンテンツを記述します</p>
    </div>
    <div class="right-column">
      <h1>右側</h1>
      <p>ここに右側コンテンツを記述します</p>
    </div>
  </div>
</body>
</html>

.container {
  display: flex;
  width: 100%;
}

.left-column {
  width: 300px;
}

.right-column {
  flex: 1;
}

上記コードを保存し、ブラウザで開くと、左右カラムが画面幅に合わせて自動的に調整されます。

以下のコードは、3カラムレイアウトとメディアクエリを用いて、画面サイズに応じてレイアウトを切り替える例です。

<div class="container">
  <div class="left-column">
    <h1>左側</h1>
    <p>ここに左側コンテンツを記述します</p>
  </div>
  <div class="center-column">
    <h1>中央</h1>
    <p>ここに中央コンテンツを記述します</p>
  </div>
  <div class="right-column">
    <h1>右側</h1>
    <p>ここに右側コンテンツを記述します</p>
  </div>
</div>

.container {
  display: flex;
  width: 100%;
}

.left-column,
.center-column,
.right-column {
  flex: 1;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

上記コードでは、768px以下の画面サイズでは、カラムレイアウトを縦並びに切り替えています。

残りの幅を埋めるdivの展開：その他の方法

width: auto;

最もシンプルな方法として、width: auto;を指定する方法があります。この場合、div要素はコンテンツの幅に合わせて自動的に調整されます。

例：

<div class="container">
  <div class="left-column">
    <h1>左側</h1>
    <p>ここに左側コンテンツを記述します</p>
  </div>
  <div class="right-column">
    <h1>右側</h1>
    <p>ここに右側コンテンツを記述します</p>
  </div>
</div>

.container {
  display: flex;
  width: 100%;
}

.left-column {
  width: 300px;
}

.right-column {
  width: auto;
}

メリット:

シンプルで記述量が少ない

コンテンツが長い場合、横スクロールが発生する可能性がある

calc()関数を使うと、他の要素の幅を計算して、残りの幅を算出することができます。

<div class="container">
  <div class="left-column">
    <h1>左側</h1>
    <p>ここに左側コンテンツを記述します</p>
  </div>
  <div class="right-column">
    <h1>右側</h1>
    <p>ここに右側コンテンツを記述します</p>
  </div>
</div>

.container {
  display: flex;
  width: 100%;
}

.left-column {
  width: 300px;
}

.right-column {
  width: calc(100% - 300px);
}

コンテンツが長くなっても、横スクロールが発生しない

計算式が複雑になる場合がある

CSS Gridレイアウトは、より高度なレイアウトを構築するための新しいレイアウトシステムです。

<div class="container">
  <div class="left-column">
    <h1>左側</h1>
    <p>ここに左側コンテンツを記述します</p>
  </div>
  <div class="right-column">
    <h1>右側</h1>
    <p>ここに右側コンテンツを記述します</p>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}

.left-column {
  grid-area: 1 / 1 / 2 / 2;
}

.right-column {
  grid-area: 1 / 2 / 2 / 3;
}

複雑なレイアウトを簡単に構築できる
ブラウザのサポート状況が良好

従来のレイアウトシステムと比べて、学習コストが高い

JavaScriptを用いて、動的にdiv要素の幅を調整することも可能です。

<div class="container">
  <div class="left-column">
    <h1>左側</h1>
    <p>ここに左側コンテンツを記述します</p>
  </div>
  <div class="right-column">
    <h1>右側</h1>
    <p>ここに右側コンテンツを記述します</p>
  </div>
</div>

const leftColumn = document.querySelector(".left-column");
const rightColumn = document.querySelector(".right-column");

const resizeRightColumn = () => {
  const containerWidth = container.getBoundingClientRect().width;
  const leftColumnWidth = leftColumn.getBoundingClientRect().width;
  rightColumn.style.width = `${containerWidth - leftColumnWidth}px`;
};

window.addEventListener("resize", resizeRightColumn);

resizeRightColumn();