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 を使用して垂直三分割レイアウトを実現する方法を解説しました。どちらの方法もシンプルで使いやすく、様々な場面で活用できます。

CSS 垂直三格レイアウト

Flexbox レイアウトによる実装

Grid レイアウトによる実装

まとめ

関連Q&A

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

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

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