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

生徒

「Bootstrapのナビゲーションバー（Navbar）の色を変えたいんですが、背景やリンク、ホバーの色を全部まとめて調整する方法はありますか？」

先生

「はい、BootstrapではSass変数を使うことでNavbarの配色を一括で変更できますよ。背景色やリンクの色、ホバーしたときの色も統一的にコントロールできます。」

生徒

「Sass変数って聞くと難しそうですが、どういう仕組みなんですか？」

先生

「変数というのは“名前を付けて管理する箱”のようなものです。Navbar用に色を指定する変数があって、それを変えるだけで全体のデザインが反映される仕組みです。」

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

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

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

2. BootstrapのNavbar用Sass変数とは

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

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

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

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>