スティッキーフッターの作り方を完全解説！Bootstrapで高さと余白を調整する方法

1. スティッキーフッターとは何か

1. スティッキーフッターとは何か

スティッキーフッター（Sticky Footer）とは、「コンテンツの量が少ない場合でも、フッターを常に画面の最下部に配置する」Webデザインの手法です。プログラミング初心者の方が最初につまずきやすいポイントの一つでもあります。

通常、Webページは上から順番に要素が並んでいくため、中身の文章が数行しかないと、フッターが画面の真ん中あたりに浮き上がってきてしまいます。これでは見た目が不自然で、プロっぽくない印象を与えてしまいます。スティッキーフッターを実装することで、どんなデバイスで見ても安定感のあるレイアウトを実現できます。

まずは、スティッキーフッターを適用していない「失敗例」をコードで見てみましょう。画面の下に大きな空白ができてしまうことが確認できます。

<style>
  .bad-example-body {
    background-color: #f8f9fa;
  }
  .bad-footer {
    background-color: #343a40;
    color: white;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="bad-example-body">
  <div class="container py-4">
    <h1>こんにちは！</h1>
    <p>このページはコンテンツがとても少ないです。</p>
    <p>すると、フッターが画面の途中で止まってしまいます...</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid mb-3">
  </div>
  <footer class="bad-footer">
    不自然な位置にあるフッター
  </footer>
</div>

このように、コンテンツが少ないときにフッターの下に余計な「空白」ができてしまう問題を、Bootstrapの標準機能と数行のCSSでスマートに解決する方法を、次の章から詳しく解説していきます。

2. スティッキーフッターの高さ問題とは？

2. スティッキーフッターの高さ問題とは？

高さ問題とは、「画面全体の高さ」と「中身の高さ」が合っていないために、フッターがページの途中に出てしまう現象のことです。
この問題を解決するには、全体の高さを 100vh（ビューポートの高さ）に合わせる工夫が必要です。

3. Bootstrapでスティッキーフッターを実装するHTML例

3. Bootstrapでスティッキーフッターを実装するHTML例

Bootstrapのグリッドやユーティリティクラスを使って、最もシンプルなスティッキーフッターを作るHTML構成です。

<style>
  html, body {
    height: 100%;
  }
  .wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .content {
    flex: 1;
  }
</style>

<div class="wrapper">
  <header class="bg-primary text-white p-3">ヘッダー</header>
  <main class="content container py-5">
    <h2>メインコンテンツ</h2>
    <p>ここにメインの内容が入ります。</p>
  </main>
  <footer class="bg-dark text-white text-center py-3">固定フッター</footer>
</div>

4. 高さを100%にする意味

4. 高さを100%にする意味

htmlとbodyにheight: 100%を指定すると、画面全体の高さに合わせた表示ができます。これがないと、内容が少ないときにフッターが途中に来てしまいます。

5. フレックスボックスで余白を自動調整

5. フレックスボックスで余白を自動調整

Bootstrapではdisplay: flexを使って、上下にコンテンツを分けて表示できます。
flex: 1を使うと、中央のコンテンツ部分が自動的に余白を広げ、フッターを最下部に固定することができます。

6. containerの使い方と余白設計のポイント

6. containerの使い方と余白設計のポイント

Bootstrapでは、containerを使うことで左右の余白を自動で作ってくれます。
さらにpy-●クラス（上下のパディング）で上下の余白を調整できます。
py-5は上下に大きめの余白を取るので、全体がバランスよく見えます。

7. 固定ではない「ページ最下部に張り付く」違いとは？

7. 固定ではない「ページ最下部に張り付く」違いとは？

今回のスティッキーフッターは「常に画面下部」ではなく、「コンテンツが短いときにだけ、画面の最下部に張り付く」スタイルです。
スクロールしたらフッターが動くので、position: fixedとは違うという点も覚えておきましょう。

8. スマホ対応やレスポンシブデザインでも安心

8. スマホ対応やレスポンシブデザインでも安心

この方法はレスポンシブ対応もされているため、スマートフォンでも画面下にフッターが表示されます。Bootstrapのflex設計は非常に強力なので、モバイルファーストでも安心して使えます。

9. よくある失敗とその対処法

9. よくある失敗とその対処法

• 高さが足りない：htmlとbodyのheight指定を忘れている
• フッターが上に表示される：flex: 1 の指定がされていない
• 余白がない：containerやpyクラスで余白を追加する

まとめ

まとめ

スティッキーフッターは、ページ内容が少ない場合でもフッターを画面の最下部に自然に配置できる便利なレイアウト手法であり、Bootstrapを使うことで初心者でも比較的簡単に実装できます。とくに、コンテンツの高さが短いページでは、フッターが途中で止まってしまい「ページの終わり」が曖昧になってしまうため、ユーザーにとって見づらい構成になりがちです。このような課題を解消するために、画面の高さやコンテンツ領域の伸び方をコントロールし、余白を自動調整する仕組みを理解することが重要です。 今回の記事では、htmlとbodyの高さを100％にし、ラッパー要素にmin-height: 100%とflexを組み合わせることで、中央のコンテンツ領域が自然に伸びる構造になることを学びました。これにより、余分なスペースを中央コンテンツが吸収し、フッターが常に最下部へ押し出されるしくみが完成します。Bootstrapのグリッドやユーティリティクラスと相性が良く、レスポンシブにも対応しているため、スマートフォンでも自然なレイアウトを実現できます。 また、py-●クラスによる余白調整や、containerによる横幅管理を合わせて使用することで、見た目にもバランスの良い構成が作れることも重要なポイントです。スティッキーフッターは一見単純な構造に見えますが、「高さ」と「余白」の関係を丁寧に整えることで初めて安定した動作になります。以下に今回学んだポイントを反映したシンプルなスティッキーフッターのサンプルを示します。

<style>
  html, body {
    height: 100%;
  }
  .layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .layout-content {
    flex: 1;
  }
</style>

<div class="layout-wrapper">
  <header class="bg-primary text-white p-3">ヘッダーエリア</header>

  <main class="layout-content container py-5">
    <h2>サンプルコンテンツ</h2>
    <p>高さが短いページでも最下部にフッターが表示される例です。</p>
  </main>

  <footer class="bg-dark text-white text-center py-3">
    スティッキーフッターのサンプル
  </footer>
</div>

このHTML構成では、中央のlayout-contentが伸びてくれるため、内容が少ない場合でもフッターが押し下げられ、画面最下部に自然に位置します。スマートフォンやタブレットなど異なる画面幅でも、Bootstrapのレイアウト機能のおかげでバランスよく表示される点も魅力です。また、記事でも説明したとおり、この方法はあくまで「スクロールに追従しない通常のフッター」であり、position: fixedによる固定フッターとは異なる挙動になります。ページ内容が多くスクロールする場合は、一般的なフッターとして自然に画面外へ流れていきますが、内容が少ないときには画面下にしっかり張り付くのが今回のスタイルです。 さらに、余白管理も重要な要素であり、py-5のような上下パディングを設定することで、見やすく整えられたコンテンツエリアを作成できます。ページ全体の伸び方を意識しながら、どの部分にどれだけ余白が必要かを判断する力を身につけることで、より美しく読みやすいページ構成が実現できます。スティッキーフッターはブログ、LP、企業サイト、ポータルサイトなどさまざまな場面で利用されるため、今回の仕組みを理解しておくと幅広いページ制作で応用できる強みになります。 今後の制作では、ページの高さを扱うCSS、flexboxの使い方、要素間の余白設計を総合的に捉えることで、さらに完成度の高い構成を作れるようになります。Bootstrapのコンポーネントと組み合わせることで、複雑なレイアウトにも対応しやすくなるため、繰り返し実践しながら理解を深めていきましょう。