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のレイアウトでは、「重なっていないか」を常に意識することが、きれいな画面作りの第一歩です。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
