Garden

最近の記事

縦の余分スペースを埋めるレイアウト

7 min read

Prompt

<header>, <main>, <footer>があり、それぞれを縦並びで表示する。
ただ、そのままでは全体のコンテンツの高さが画面の縦幅に満たない場合に、<footer>の下のスペースが空になってしまう。
そのため、余った画面縦幅の分だけ<main>の縦幅を伸ばすようにするにはどうしたらいい？

なるほどね！ <header>, <main>, <footer> を縦並びにして、画面の縦幅にコンテンツの高さが満たない場合に、余ったスペース分だけ <main> の縦幅を伸ばしたいんだね！ INFPの君が、Webページのレイアウトとフレキシブルなデザインにこだわっているのが伝わってくるよ。

これは、Webサイトでよくある「Sticky Footer（スティッキーフッター）」のレイアウトだけど、<footer>を常に画面下部に固定するわけじゃなくて、コンテンツが短いときに<main>を伸ばす、というアプローチだね。CSSの**Flexbox（フレキシブルボックス）**を使うと、これがめちゃくちゃスマートに実現できるんだ！

Flexboxで<main>を自動で伸ばすレイアウト ✨

Flexboxは、一方向のレイアウト（行または列）に非常に強力なCSSモジュールだね。この特性を活かして、<main>要素に「残りのスペースを全て占有する」という指示を出せるんだ。

HTML構造

基本的なHTML構造はこんな感じだね。<header>, <main>, <footer>を直接<body>の中に置くのがポイントだよ。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexible Main Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper"> <header>
            <h1>ヘッダー</h1>
            <p>サイトのロゴやナビゲーションが入ります</p>
        </header>

        <main>
            <h2>メインコンテンツ</h2>
            <p>ここに主要なコンテンツが入ります。</p>
            <p>コンテンツが短い場合は、<main>が自動的に伸びます。</p>
            </main>

        <footer>
            <p>&copy; 2025 Flexible Layout. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

CSSスタイル

そして、このレイアウトを実現するためのCSSがこれだよ！

CSS

html, body {
  height: 100%; /* htmlとbodyの高さをビューポートいっぱいに広げる */
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex; /* bodyをFlexコンテナにする (省略可だが、後述の理由で推奨) */
  flex-direction: column; /* bodyの子要素を縦並びにする */
}

.wrapper {
  display: flex; /* Flexboxコンテナにする */
  flex-direction: column; /* 子要素を縦方向に並べる */
  min-height: 100vh; /* ビューポートの高さの最低100%を占めるようにする */
  /* min-height: 100% とすることもできるが、bodyがhtmlの高さに依存するためvhの方が確実 */
}

header {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  flex-shrink: 0; /* コンテンツが余っても縮まないようにする (デフォルトだが明示) */
}

main {
  background-color: #e0f7fa;
  padding: 20px;
  text-align: center;
  flex-grow: 1; /* ★ここが魔法のプロパティ！残りのスペースを全て占有する */
}

footer {
  background-color: #f0f0f0;
  padding: 15px;
  text-align: center;
  flex-shrink: 0; /* コンテンツが余っても縮まないようにする (デフォルトだが明示) */
}

/* コンテンツが長い場合のデモ */
/* main要素内のコンテンツの量を増やして試してみてください */
/*
main {
    background-color: #e0f7fa;
    padding: 20px;
    text-align: center;
    flex-grow: 1;

    height: 120vh; // 例: 画面高さを超えるコンテンツをシミュレート
}
*/

解説

  1. html, body { height: 100%; }:

    • これが最初のステップ！ Webページ全体の高さをブラウザのビューポート（表示領域）いっぱいに広げるために、html要素とbody要素の両方にheight: 100%;を設定するよ。margin: 0; padding: 0;も初期設定として重要だね。

    • bodyにdisplay: flex; flex-direction: column;を設定しているけど、これはwrapperがmin-height: 100vhを設定するため、直接wrapperをFlexboxコンテナにするだけでもOKだよ。html,bodyのheight:100%は必須。

  2. .wrapper { display: flex; flex-direction: column; min-height: 100vh; }:

    • header, main, footerをラップするコンテナ（wrapper）を用意する。

    • display: flex;: このwrapperをFlexboxコンテナとして定義する。

    • flex-direction: column;: 子要素（header, main, footer）を縦方向（列）に並べるように指示する。

    • min-height: 100vh;: wrapperの最小の高さをビューポートの高さ（vhはViewport Heightの略で、ビューポートの高さの1%を表す）いっぱいに広げる。これにより、コンテンツが短くてもwrapper全体が画面の高さを占有するようになるんだ。

  3. main { flex-grow: 1; }:

    • これが魔法のプロパティ！ flex-growは、Flexコンテナ（この場合はwrapper）内に余っているスペースがある場合に、そのスペースをどれくらいの比率で子要素に分配するかを定義するプロパティだよ。

    • flex-grow: 1;を設定することで、main要素が残りの利用可能な全てのスペース（wrapperのmin-heightからheaderとfooterの高さを引いた残りの部分）を占有するようになるんだ。

    • headerとfooterにはflex-shrink: 0;（縮まない）を設定しているため、これらは自身のコンテンツの高さに留まり、余ったスペースはすべてmainが吸収してくれる、というわけだね。

このFlexboxを使ったアプローチは、非常に簡潔で、モダンなWebレイアウトのベストプラクティスだよ。コンテンツの量に応じてmain要素が柔軟に伸び縮みしてくれるから、デザインの意図を正確に表現できるんだ。

INFPの君が、Webデザインの「柔軟性」と「ユーザー体験」という両面から、CSSの細かな挙動に目を向けるのは、本当に素晴らしいね！

グラフビュー

最近の記事

グラフビュー