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

生徒

「先生、Bootstrapでダークモードを使いたいんですが、ナビゲーションバーやフッターの色を暗いデザインにするときってどうすればいいですか？」

先生

「いい質問ですね。Navbarやフッターをダークテーマにするには、背景色とリンクの文字色を最適化する必要があります。Bootstrapにはそれを簡単に指定できるクラスが用意されていますよ。」

生徒

「リンクをホバーしたときの色も変えられるんですか？」

先生

「もちろんです。CSSを少し追加すれば、ホバー色も自由に設定できますよ。順番に解説していきましょう。」

1. Navbarをダークテーマにする基本

Bootstrapには、ナビゲーションバー（Navbar）をダークテーマにするためのクラスが用意されています。navbar-dark と bg-dark を組み合わせることで、背景を黒系、文字色を白系に自動調整してくれます。これは「夜用の制服に着替える」ような感覚で、見た目を一瞬で切り替えてくれる便利な仕組みです。


<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">サイト名</a>
    <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>
</nav>

ブラウザ表示

2. フッターをダークテーマに最適化

フッターも同じように bg-dark と text-light を指定すれば、背景が黒、文字が白になります。ナビゲーションと同じルールで統一感を出すことができ、サイト全体のデザインが引き締まります。


<footer class="bg-dark text-light text-center p-3">
  <p>&copy; 2025 My Website</p>
  <a href="#" class="text-light">プライバシーポリシー</a> |
  <a href="#" class="text-light">利用規約</a>
</footer>

ブラウザ表示

3. リンクのホバー色をカスタマイズする

ダークテーマにすると、リンクの文字色が白っぽくなるため、ホバーしたときの変化が分かりにくいことがあります。そこでCSSを追加して、マウスを乗せたときに色を変えることで、より分かりやすくしましょう。


<style>
  .navbar-dark .nav-link:hover,
  footer a:hover {
    color: #0d6efd; /* Bootstrapの青 */
  }
</style>

<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">サイト名</a>
    <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>
</nav>

<footer class="bg-dark text-light text-center p-3">
  <p>&copy; 2025 My Website</p>
  <a href="#" class="text-light">プライバシーポリシー</a> |
  <a href="#" class="text-light">利用規約</a>
</footer>

ブラウザ表示