BootstrapのNavbarをカスタマイズ！Sass変数で背景色・リンク色・ホバー色を一括調整する方法

1. Navbarをカスタマイズする必要性

1. Navbarをカスタマイズする必要性

Webサイトを作るとき、ページ上部に配置されるナビゲーションバー（Navbar）はとても目立ちます。Bootstrapのデフォルトでも十分便利ですが、ブランドカラーやデザインに合わせて背景やリンクの色を変更したい場合がよくあります。

もし一つ一つのリンクや背景色を手作業で指定すると、後から修正するときに大変です。そこでSass変数を使えば「色をまとめて管理」できるので、プロジェクト全体のデザインを効率よく統一できます。

2. BootstrapのNavbar用Sass変数とは

2. BootstrapのNavbar用Sass変数とは

Bootstrap 5では、Navbarに関する配色を管理するためのSass変数が用意されています。代表的なものは次の通りです。

• $navbar-bg … Navbar全体の背景色
• $navbar-color … リンクやテキストの基本色
• $navbar-hover-color … リンクにカーソルを置いたときの色
• $navbar-brand-color … 左上のブランド名（ロゴ部分）の色

これらを一括で書き換えると、Navbar全体の雰囲気を簡単に変えることができます。

3. 実際のカスタマイズ例

3. 実際のカスタマイズ例

ここでは例として、背景を濃い青に、リンクは白、ホバー時はオレンジに設定してみます。

<style>
    :root {
        --bs-navbar-bg: #003366;        /* 背景を濃い青 */
        --bs-navbar-color: #ffffff;     /* リンク文字を白 */
        --bs-navbar-hover-color: #ff9900; /* ホバー時はオレンジ */
    }
</style>

<nav class="navbar navbar-expand-lg" style="background-color: var(--bs-navbar-bg);">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="#">ブランド名</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
      data-bs-target="#navbarNav" aria-controls="navbarNav" 
      aria-expanded="false" aria-label="ナビゲーション切替">
      <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 text-white" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">サービス</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

4. Sass変数とCSS変数の違い

4. Sass変数とCSS変数の違い

初心者が混乱しやすいのは、Sass変数とCSS変数の違いです。Sass変数は開発時に使う「設計図の値」で、コンパイルするとCSS変数や固定の色コードになります。一方、CSS変数は実際にブラウザで参照される「実物の値」です。

Bootstrap 5ではSassで定義された値が最終的にCSS変数として出力されるので、CSS変数を上書きすることでもカスタマイズは可能です。ただし、大規模な開発ではSass変数を変更して再コンパイルする方法のほうが推奨されます。

5. 初心者が試すときの工夫

5. 初心者が試すときの工夫

初心者がNavbarをカスタマイズする際には、次の工夫をすると理解しやすくなります。

• まずは背景色だけを変えてみて、画面全体にどのように反映されるか確認する
• 次にリンク文字色やホバー色を変えて、バランスを見ながら調整する
• ブランドカラーを決めて、それをNavbar全体に反映すると統一感が出やすい

検索エンジンからも「Bootstrap Navbar カスタマイズ Sass」「Navbar 背景色 リンク色 変更」といったキーワードで記事が見つかりやすくなるでしょう。

まとめ

まとめ

BootstrapのNavbarカスタマイズを振り返る

今回の記事では、BootstrapのNavbarをカスタマイズする方法について、特にSass変数を中心に詳しく解説してきました。 ナビゲーションバーはWebサイトの中でも特に目立つパーツであり、ユーザーが最初に目にする重要な要素です。 そのため、背景色やリンク色、ホバー時の色を適切に調整することは、デザイン性だけでなく使いやすさにも大きく影響します。

BootstrapのNavbarは、デフォルトのデザインでも十分に整っていますが、実際の開発現場では ブランドカラーやサービスの世界観に合わせて細かく調整したくなる場面が多くあります。 そこで役立つのがSass変数による一括管理です。 Sass変数を使えば、Navbarの背景色、リンクの文字色、ホバー時の色、ブランド名の色などを まとめて管理できるため、後からの修正やデザイン変更にも柔軟に対応できます。

特に重要なのは、「どこを変えれば、どこに影響するのか」を意識することです。 Sass変数は設計段階で使う値なので、プロジェクト全体のデザインルールを決める役割を担います。 一方で、最終的にブラウザで使われるのはCSS変数や固定されたCSSの値です。 Bootstrapでは、この両者がうまく連携しているため、初心者でも段階的に理解しやすい構造になっています。

Navbar配色の考え方をコードで再確認

ここで、記事内容の復習として、Navbarの配色をCSS変数で管理する簡単なサンプルを見てみましょう。 Sass変数で設計された考え方を、そのままCSS変数として反映するイメージです。 背景色、リンク色、ホバー色をまとめて管理することで、Navbar全体の統一感が高まります。

<style>
:root {
    --bs-navbar-bg: #222244;
    --bs-navbar-link: #ffffff;
    --bs-navbar-hover: #66ccff;
}

.navbar-custom {
    background-color: var(--bs-navbar-bg);
}

.navbar-custom .nav-link {
    color: var(--bs-navbar-link);
}

.navbar-custom .nav-link:hover {
    color: var(--bs-navbar-hover);
}
</style>

<nav class="navbar navbar-expand-lg navbar-custom">
    <div class="container-fluid">
        <a class="navbar-brand text-white" href="#">サンプルサイト</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" 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>
</nav>

このように、色に関する設定を変数としてまとめておくことで、 後からデザインを変更したくなった場合でも、変数の値を差し替えるだけで対応できます。 BootstrapのNavbarカスタマイズでは、この「まとめて管理する」という考え方が非常に重要です。 小規模なサイトだけでなく、中規模・大規模なWeb制作でも役立つ基本的なテクニックと言えるでしょう。