スティッキーフッターの作り方を完全解説！Bootstrapで高さと余白を調整する方法
生徒
「ページの一番下に常にフッターを固定したいんですが、Bootstrapでできますか？」
先生
「はい、Bootstrapだけでもスティッキーフッターを作ることができます。ちょっとしたコツがあるので解説しますね。」
生徒
「うまくいかなくて、フッターが途中に出たり、スペースが足りなかったりします...」
先生
「それは"高さ"と"余白"の調整が関係しています。一緒に解決していきましょう！」
1. スティッキーフッターとは何か
スティッキーフッターとは、ページの内容が少ないときでも、画面の一番下（最下部）にフッターを固定するデザインのことです。たとえば、記事が短いと画面の中央でフッターが止まってしまうことがありますが、それを防ぐのが目的です。
2. スティッキーフッターの高さ問題とは？
高さ問題とは、「画面全体の高さ」と「中身の高さ」が合っていないために、フッターがページの途中に出てしまう現象のことです。
この問題を解決するには、全体の高さを 100vh（ビューポートの高さ）に合わせる工夫が必要です。
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%にする意味
htmlとbodyにheight: 100%を指定すると、画面全体の高さに合わせた表示ができます。これがないと、内容が少ないときにフッターが途中に来てしまいます。
5. フレックスボックスで余白を自動調整
Bootstrapではdisplay: flexを使って、上下にコンテンツを分けて表示できます。
flex: 1を使うと、中央のコンテンツ部分が自動的に余白を広げ、フッターを最下部に固定することができます。
6. containerの使い方と余白設計のポイント
Bootstrapでは、containerを使うことで左右の余白を自動で作ってくれます。
さらにpy-●クラス（上下のパディング）で上下の余白を調整できます。
py-5は上下に大きめの余白を取るので、全体がバランスよく見えます。
7. 固定ではない「ページ最下部に張り付く」違いとは？
今回のスティッキーフッターは「常に画面下部」ではなく、「コンテンツが短いときにだけ、画面の最下部に張り付く」スタイルです。
スクロールしたらフッターが動くので、position: fixedとは違うという点も覚えておきましょう。
8. スマホ対応やレスポンシブデザインでも安心
この方法はレスポンシブ対応もされているため、スマートフォンでも画面下にフッターが表示されます。Bootstrapのflex設計は非常に強力なので、モバイルファーストでも安心して使えます。
9. よくある失敗とその対処法
- 高さが足りない：htmlとbodyのheight指定を忘れている
- フッターが上に表示される：flex: 1 の指定がされていない
- 余白がない：containerやpyクラスで余白を追加する
