Bootstrapの固定ヘッダーとフッター完全ガイド！被りを防ぐpadding-topとstickyの正しい使い分け
生徒
「ヘッダーを固定したら、ページの上の文字が隠れてしまいました…」
先生
「それは固定ヘッダーでよく起こる被り問題ですね。」
生徒
「padding-topとかstickyって聞いたことはありますが、違いが分かりません」
先生
「大丈夫です。役割を分けて考えると、とてもシンプルですよ。」
1. 固定ヘッダーとフッターとは何かを理解しよう
固定ヘッダーとは、画面をスクロールしても、上にずっと表示されたままのヘッダーのことです。固定フッターは、その逆で、画面の下にずっと表示され続けるものです。
電車の案内板のように、常に見えていてほしい情報を置くために使われます。Bootstrapでも、このような固定レイアウトはよく使われます。
2. なぜ固定するとコンテンツが被ってしまうのか
固定ヘッダーを使うと、ヘッダーは画面の上に重なって表示されます。その結果、下にある本来の内容が隠れてしまうことがあります。
これは、透明な下敷きを文字の上に置いたような状態です。下の文字は存在しているのに、見えなくなってしまうのです。
3. padding-topで被りを防ぐ基本の考え方
一番シンプルな解決方法がpadding-topです。paddingとは、要素の内側に余白を作る仕組みです。
固定ヘッダーの高さ分だけ、本文の上に余白を作れば、被りは起こらなくなります。
<style>
.container {
padding-top: 56px;
}
</style>
<nav class="navbar fixed-top navbar-dark bg-secondary">
固定ヘッダー
</nav>
<div class="container">
<p>ここから本文が始まります</p>
</div>
ヘッダーの高さが56くらいなら、その分だけpadding-topを入れる、という考え方です。
4. Bootstrapのfixed-topとfixed-bottomの特徴
Bootstrapには、fixed-topとfixed-bottomというクラスがあります。これを付けるだけで、ヘッダーやフッターを固定できます。
<nav class="navbar fixed-top bg-primary text-white">
上に固定されたヘッダー
</nav>
<footer class="fixed-bottom bg-secondary text-white">
下に固定されたフッター
</footer>
ただし、このままでは上下の内容が隠れやすいので、paddingによる調整が必要になります。
5. stickyとは何かをやさしく理解しよう
stickyは「ある位置までは普通、その後は固定」という動きをします。最初から固定されるわけではありません。
机の上に置いた付箋が、ある場所でピタッと止まるイメージです。スクロールして一定の位置に来たら固定されます。
<div class="sticky-top bg-warning p-2">
スクロールすると途中から固定される要素
</div>
<div class="container">
<p>たくさんの文章が続きます</p>
</div>
stickyは、最初から被らないため、padding調整がほぼ不要なのが特徴です。
6. padding-topとstickyの使い分け方
最初からずっと表示したいヘッダーはfixed-topを使い、padding-topで被りを防ぎます。
途中から表示を固定したい場合はstickyを使うと、余白調整の手間が減ります。目的によって使い分けることが大切です。
7. 固定フッターで気をつけたいポイント
固定フッターも、下の内容と被る可能性があります。本文の下側にpadding-bottomを入れて対策します。
<style>
body {
padding-bottom: 60px;
}
</style>
<footer class="fixed-bottom bg-dark text-white">
固定フッター
</footer>
上だけでなく、下の被りにも注意することで、読みやすいページになります。
8. 初心者が覚えておくべき設計の考え方
固定は便利ですが、必ず被り対策が必要です。固定ならpadding、途中固定ならsticky、と覚えると混乱しません。
Bootstrapのレイアウトでは、「重なっていないか」を常に意識することが、きれいな画面作りの第一歩です。
