BootstrapでNavbarとフッターをダークテーマに最適化！初心者でもわかる背景・リンク・ホバー色の設定

Navbar・フッターのダークテーマ最適化：背景・リンク・ホバー色

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

生徒

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

先生

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

生徒

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

先生

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

1. Navbarをダークテーマにする基本設定とコツ

Bootstrapを使ってウェブサイトを制作する際、ナビゲーションバー（Navbar）を「ダークモード」に対応させるのは非常に一般的です。初心者の方でも、Bootstrapが提供する専用のクラスを組み合わせるだけで、一瞬で洗練された黒系のデザインに切り替えることができます。

基本となるのは、背景色を決める bg-dark と、文字色を最適化する navbar-dark という2つのクラスです。これらはセットで使用するのがルールです。特に navbar-dark は重要で、これを指定することで「背景が暗いから、文字は白っぽく読みやすくしよう」とBootstrapが自動で判断し、ロゴやメニューの見栄えを調整してくれます。

未経験者向けポイント： 「bg-dark」は背景を黒にする指示、「navbar-dark」は中の文字（リンクなど）を白系にして目立たせるための指示だと考えると分かりやすいですよ。


<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="/img/sample120-120.jpg" alt="ロゴ" width="30" height="30" class="d-inline-block align-text-top me-2">
            My Portfolio
        </a>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" 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>
                <li class="nav-item">
                    <a class="nav-link" href="#">お問い合わせ</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

ブラウザ表示

上のサンプルコードでは、画像（ロゴ）とテキストを組み合わせた実用的な構成にしています。クラスを1つ追加するだけで、文字がくっきりと浮かび上がり、プロが作ったような高級感のあるヘッダーが完成します。まずはこの基本の組み合わせをマスターしましょう。

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>

ブラウザ表示