Categories: html css js

レスポンシブナビゲーションバーの作り方と実装ポイントを徹底解説

スマートフォンやタブレット、パソコンなど、あらゆるデバイスで快適に見られるWebサイトを作るには「レスポンシブデザイン」が欠かせません。特にナビゲーションバー（メニュー）はユーザー体験を大きく左右する重要な要素です。本記事では、HTML・CSS・JavaScriptを用いて、画面サイズに応じて形を変える「レスポンシブナビゲーションバー」の作り方を初心者にも分かりやすく解説します。実際のコードも紹介しながら、使いやすさと見た目のバランスが取れたナビゲーションバーを作成するためのポイントを学んでいきましょう。

レスポンシブナビゲーションバーとは？
実装に必要な基本知識
実装ステップ①：HTMLで基本構造を作る
実装ステップ②：CSSでレスポンシブ対応する
実装ステップ③：JavaScriptでハンバーガー動作を追加
実装の注意点と改善アイデア
1. アニメーションを加える
2. メニューを閉じる処理を追加
よくあるトラブルとその対策
まとめ：ユーザビリティとデザイン性を両立しよう

レスポンシブナビゲーションバーとは？

「レスポンシブナビゲーションバー」とは、デバイスの画面幅に応じてレイアウトや表示形式が変化するナビゲーションメニューのことです。

たとえば、PC画面では横並びのメニューを表示し、スマートフォンでは「ハンバーガーメニュー」と呼ばれる三本線のアイコンをクリックしてメニューを展開する形式が一般的です。このような動的な切り替えは、ユーザーにとっても直感的で、操作性の高いUIを実現できます。

実装に必要な基本知識

レスポンシブナビゲーションを作るために必要な知識は以下の3つです。

HTML：ナビゲーションの構造を記述する
CSS：レイアウトやデザインを整える
JavaScript：ハンバーガーメニューの開閉動作などを制御

これらを組み合わせることで、柔軟に対応できるナビゲーションを構築できます。

実装ステップ①：HTMLで基本構造を作る

まずは基本的なナビゲーションバーの構造をHTMLで記述します。

<header>
  <nav class="navbar">
    <div class="logo">MySite</div>
    <ul class="nav-links" id="navLinks">
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">会社情報</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
    <div class="hamburger" id="hamburger">
      &#9776;
    </div>
  </nav>
</header>

nav-links：通常のナビゲーション
hamburger：モバイル時に表示するメニュー開閉用アイコン

実装ステップ②：CSSでレスポンシブ対応する

続いてCSSでレスポンシブに対応させていきます。まずはベースとなるスタイルを整えます。

/* 共通スタイル */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
}

次にメディアクエリを使って、スマートフォンなど画面幅が狭いデバイス用のスタイルを追加します。

@media screen and (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #444;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
  }

  .nav-links.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

実装ステップ③：JavaScriptでハンバーガー動作を追加

ハンバーガーメニューをクリックするとナビゲーションを表示・非表示する処理をJavaScriptで追加します。

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("navLinks");

hamburger.addEventListener("click", () => {
  navLinks.classList.toggle("active");
});

この処理により、ハンバーガーアイコンをクリックすると.nav-linksにactiveクラスが付き、メニューが展開されます。

実装の注意点と改善アイデア

アニメーションを加える

CSSのtransitionプロパティを使えば、メニューがスムーズに表示されるアニメーションも追加できます。

.nav-links {
  transition: all 0.3s ease;
}

メニューを閉じる処理を追加

メニュー内のリンクをクリックしたときにメニューが閉じる処理を追加するとより使いやすくなります。

const navItems = document.querySelectorAll(".nav-links a");

navItems.forEach(item => {
  item.addEventListener("click", () => {
    navLinks.classList.remove("active");
  });
});