CSS 縦 3分割

CSS 垂直三格レイアウト

この記事では、CSS を使用して垂直三分割レイアウトを実現する方法について解説します。具体的には、上部と下部の高さを固定し、中央部分を可変にする方法を、flexbox と grid の2つの方法で紹介します。

Flexbox レイアウトによる実装

Flexbox を使用すると、要素を柔軟に配置することができます。垂直三分割レイアウトを実現するには、以下のように記述します。 


<div class="container">
  <header class="header">ヘッダー</header>
  <main class="content">コンテンツ</main>
  <footer class="footer">フッター</footer>
</div>


.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 親要素の高さを継承 */
}

.header {
  height: 100px; /* 固定の高さ */
  background-color: #f0f0f0;
}

.content {
  flex: 1; /* 残りの空間をすべて使用する */
  background-color: #e0e0e0;
}

.footer {
  height: 50px; /* 固定の高さ */
  background-color: #d0d0d0;
}

上記コードでは、以下のように設定しています。

プロパティ 説明
display: flex; コンテナをフレックスコンテナにする
flex-direction: column; 要素を縦方向に配置する
height: 100vh; コンテナの高さをビューポートの高さに設定する
flex: 1; 残りの空間をすべて使用するように設定する

Grid レイアウトによる実装

Grid レイアウトは、より複雑なレイアウトを実現する場合に適しています。垂直三分割レイアウトを実現するには、以下のように記述します。 


<div class="container">
  <header class="header">ヘッダー</header>
  <main class="content">コンテンツ</main>
  <footer class="footer">フッター</footer>
</div>


.container {
  display: grid;
  grid-template-rows: 100px 1fr 50px; /* 上: 100px, 中: 可変, 下: 50px */
  height: 100vh; /* 親要素の高さを継承 */
}

.header {
  background-color: #f0f0f0;
}

.content {
  background-color: #e0e0e0;
}

.footer {
  background-color: #d0d0d0;
}

上記コードでは、以下のように設定しています。

プロパティ 説明
display: grid; コンテナをグリッドコンテナにする
grid-template-rows: 100px 1fr 50px; グリッドの行の高さを指定する (上: 100px, 中: 可変, 下: 50px)
1fr 残りの空間をすべて使用するように設定する

まとめ

この記事では、flexbox と grid の2つの方法で、CSS を使用して垂直三分割レイアウトを実現する方法を解説しました。どちらの方法もシンプルで使いやすく、様々な場面で活用できます。

関連Q&A

  1. Q: 中央部分のコンテンツ量が多い場合、どのように対応すればよいですか？

    A: 中央部分のコンテンツ量が多い場合は、`overflow: auto;` を設定することでスクロールバーが表示され、コンテンツ全体を表示できるようになります。

  2. Q: 上下の固定部分の高さをレスポンシブ対応するにはどうすればよいですか？

    A: メディアクエリを使用して、画面サイズに応じて高さを変更することができます。例えば、スマホ表示では高さを小さくするといったことが可能です。

  3. Q: Flexbox と Grid のどちらの方法を使うべきですか？

    A: レイアウトの複雑さによって使い分けることが推奨されます。単純な三分割レイアウトであれば Flexbox で十分ですが、より複雑なレイアウトの場合は Grid を使用する方が効果的です。

その他の参考記事:CSS レイアウトの配置