Bootstrapのナビゲーションバーを固定する方法！初心者でもわかるスターターテンプレートと重なり対策

Navbar固定（fixed/sticky）のスターターとコンテンツ被り対策

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

生徒

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

先生

「はい、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>

ブラウザ表示

6. sticky-topとfixed-topの違いも覚えておこう

ナビバーをスクロールしても常に表示させたい場合はfixed-top、ページの途中にある要素をスクロールで画面上部に張り付けたい場合はsticky-topを使います。

今回はナビバーのように常に上に表示させたいので、fixed-topが適しています。

7. スマホでも見やすいデザインの工夫

Bootstrapでは、スマホでも見やすいように、ナビバーが折りたたまれてハンバーガーメニューになります。ボタンを押すと展開される仕組みになっているので、初心者でも簡単にスマホ対応ができます。

ナビバーの構造と重なり対策を知っておくことで、Webサイト全体の見た目と使いやすさがアップします。

まとめ

Bootstrapのナビゲーションバー固定を正しく理解しよう

今回の記事では、Bootstrapを使ってナビゲーションバーを固定する方法について、初心者の方でも理解しやすいように、基礎から順番に解説してきました。ナビゲーションバーは、Webサイト全体の使いやすさを大きく左右する重要な要素です。常に画面の上に表示されていれば、ユーザーは迷うことなく別のページへ移動でき、サイト全体の操作性も向上します。その一方で、固定ナビバーには「コンテンツと重なってしまう」という、初心者が必ずといっていいほど直面する問題があります。

Bootstrapでは、ナビゲーションバーを固定するために fixed-top と sticky-top というクラスが用意されています。 fixed-top は常に画面の最上部に固定されるため、サイト全体でナビバーを表示し続けたい場合に向いています。一方で sticky-top は、スクロール位置によって固定される仕組みなので、ページ途中の要素を追従させたいときに便利です。それぞれの違いを理解して使い分けることが、見やすいレイアウト作りにつながります。

重なり問題を防ぐための考え方

固定ナビバーで最も重要なのが「重なり対策」です。ナビバーを fixed-top で固定すると、ナビバーは通常のレイアウトの流れから外れ、画面の上に重なって表示されます。その結果、本文の最初の見出しや文章がナビバーの裏に隠れてしまう現象が起こります。

この問題を解決するためには、ナビバーの高さ分だけ、本文全体を下にずらす必要があります。記事内で紹介したように、 body に padding-top を指定する方法は、最もシンプルで分かりやすい対策です。ナビバーの高さを意識して数値を設定することで、コンテンツが隠れず、自然なレイアウトを保つことができます。

まとめとしてのシンプルな固定ナビバー確認サンプル

ここで、今回学んだ内容をコンパクトにまとめたサンプルコードを確認してみましょう。ナビバーを固定し、重なりを防ぐ基本構成になっています。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>固定ナビバー確認</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 56px;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">SampleSite</a>
    </div>
</nav>

<div class="container mt-4">
    <h1>本文コンテンツ</h1>
    <p>
        ナビゲーションバーが固定されていても、
        本文が隠れずに表示されています。
    </p>
</div>

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

ブラウザ表示

このように、固定ナビバーと余白調整をセットで考えることで、初心者でも安心してナビゲーションバーを実装できます。見た目だけでなく、ユーザーがストレスなく操作できるかどうかを意識することが、良いWebサイト作りの第一歩です。

先生と生徒の振り返り会話

生徒

「ナビバーを固定するときって、ただクラスを付けるだけじゃなくて、下のコンテンツとの関係も考えないといけないんですね。」

先生

「その通りです。固定ナビバーはとても便利ですが、重なり対策まで含めて初めて完成といえます。」

生徒

「padding-topを入れる理由が分かって、これからは自分で調整できそうです。」

先生

「良い理解ですね。今回学んだ考え方は、 Bootstrap以外のレイアウトでも応用できます。ぜひ実際のページ制作で活かしてください。」