先生と生徒の会話形式で理解しよう

生徒

「ページの上にあるメニュー（ナビバー）を固定してスクロールしても動かないようにできますか？」

先生

「はい、Bootstrapを使えば簡単に固定できますよ。fixed-topやsticky-topというクラスを使います。」

生徒

「でも、固定すると下の文字がナビバーと重なって見えづらくなりませんか？」

先生

「その通り！だからこそ、重なりを防ぐための調整も必要なんです。具体的に見てみましょう。」

1. ナビゲーションバー（ナビバー）とは何か？

ナビバーとは、Webページの一番上にある「メニュー」のことです。たとえば、「ホーム」「サービス」「お問い合わせ」などのリンクが並んでいる部分を指します。ナビバーがあることで、訪問者が迷わずにページを移動できます。

2. Bootstrapでナビバーを固定する方法

ナビバーを固定すると、スクロールしても常に画面の上に表示され続けます。Bootstrapでは、次の2種類があります。

fixed-top：常に画面の最上部に固定
sticky-top：スクロールしてナビバーが画面上に到達したら固定

どちらもクラスを1つ追加するだけなので、HTML初心者でも簡単に実装できます。

3. 固定ナビバーによるコンテンツの重なりとは？

ナビバーを固定にすると、次に表示される本文（コンテンツ）がその下に来てしまい、「文字が見えない」「ナビバーとかぶってしまう」などの問題が起きます。

これは、ナビバーが上に張り付いているため、下のコンテンツと重なってしまうからです。

たとえるなら、「透明なふたを上に置いて、その下に紙を滑り込ませたら、ふたで文字が隠れてしまう」といったイメージです。

4. コンテンツがナビバーと重ならないようにする対策

重なりを防ぐには、上の余白（マージン）や内側の余白（パディング）を使って、ナビバーの高さ分だけ下げる必要があります。

たとえば、ナビバーの高さが56pxであれば、本文の最初にpadding-top: 56px;をつければOKです。

Bootstrapではpt-5やmt-5などの便利なクラスも使えますが、今回はCSSで数値指定をして調整する方法を紹介します。

5. Bootstrapスターターテンプレートに組み込んだHTMLサンプル

以下に、ナビバーを固定しつつ、本文と重ならないように調整したスターターテンプレートを紹介します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>固定ナビバーのサンプル</title>
  <meta name="description" content="Bootstrapでナビゲーションバーを固定する方法と、コンテンツが重ならないようにする対策を初心者向けに解説。">
  <meta name="keywords" content="Bootstrap, ナビゲーションバー, ナビバー固定, fixed-top, sticky-top, スターターテンプレート, HTML初心者">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    body {
      padding-top: 56px;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MySite</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">ホーム</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">サービス</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <h1 class="mb-4">固定ナビバーとコンテンツの調整</h1>
    <p>このように、ナビバーを固定しても、上の余白（padding-top）を設定することで、本文が隠れずにしっかり表示されます。</p>
    <p>Bootstrapでは便利なクラスを組み合わせることで、初心者でも見やすいWebページを作成できます。</p>
   <br><br><br><br><br>
    <p>※ナビバーが固定されて表示されています</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示