JavaScriptとHTML/CSSで作るレスポンシブナビゲーションメニュー

本記事では、HTML、CSS、JavaScriptを組み合わせて、デスクトップとモバイルの両方に対応したレスポンシブなナビゲーションメニューの作り方を解説します。
ハンバーガーメニューを用いたモバイル表示や、メディアクエリを使ったレイアウトの切り替えなど、実践的なコード例を交えて説明します。

1. HTMLの構造
2. CSSでのスタイリング
3. JavaScriptによる動作制御
4. 追加のポイントとアクセシビリティ
5. まとめ
6. 参考リンク

1. HTMLの構造

レスポンシブナビゲーションメニューの基本は、しっかりとしたHTML構造にあります。ここでは、ヘッダー内にロゴ、ナビゲーションメニュー、そしてハンバーガーボタンを配置します。


<header class="header">
  <div class="logo"><a href="https://kamechannel.com/">KaMeChannel</a></div>
  <nav class="nav">
    <ul class="nav-list">
      <li><a href="#">ホーム</a></li>
      <li><a href="#">記事一覧</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">プロフィール</a></li>
    </ul>
  </nav>
  <button class="hamburger" aria-label="メニュー">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>
</header>

2. CSSでのスタイリング

CSSを利用して、ナビゲーションメニューの見た目を整えます。デスクトップ表示ではメニューが常時表示され、モバイル表示ではハンバーガーボタンをクリックするとメニューが展開する仕組みです。


/* 共通リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ヘッダー全体のスタイル */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #333;
  color: #fff;
  position: relative;
}

/* ロゴ */
.logo a {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

/* ナビゲーションメニュー */
.nav-list {
  display: flex;
  list-style: none;
}

.nav-list li {
  margin-left: 1rem;
}

.nav-list a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.nav-list a:hover {
  background-color: #555;
  border-radius: 5px;
}

/* ハンバーガーボタン */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #fff;
}

/* モバイル用スタイル */
@media (max-width: 768px) {
  nav.nav {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  nav.nav.active {
    display: block;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #333;
  }
  .nav-list {
    flex-direction: column;
    align-items: center;
  }
  .nav-list li {
    margin: 1rem 0;
  }
}

3. JavaScriptによる動作制御

JavaScriptを使用して、ハンバーガーボタンのクリックでナビゲーションメニューを表示・非表示に切り替える処理を実装します。


document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('nav.nav');
  
  hamburger.addEventListener('click', function() {
    nav.classList.toggle('active');
  });
});

4. 追加のポイントとアクセシビリティ

– レスポンシブデザイン：メディアクエリを使用して、画面サイズに合わせた表示切替を実現しています。
– アクセシビリティ：ハンバーガーボタンにはaria-labelを設定し、スクリーンリーダー対応も考慮しています。
– ユーザー体験：ホバー効果やクリック時の視覚フィードバックを取り入れ、直感的な操作を可能にしています。

5. まとめ

本記事では、HTML、CSS、JavaScriptを組み合わせたレスポンシブなナビゲーションメニューの作成方法を解説しました。
デスクトップでは常時表示され、モバイルではハンバーガーメニューをクリックすることでメニューが展開される仕組みを実現しています。
これにより、ユーザーはどのデバイスからでも快適にサイトをナビゲートでき、アクセシビリティとユーザー体験が向上します。
この基本的な実装を学び、さらに自分なりのカスタマイズを加えることで、オリジナルのナビゲーションメニューを作成することができるでしょう。

6. 参考リンク

以上がレスポンシブナビゲーションメニューについての紹介です。
次回はシンプルな画像ギャラリーの作成について紹介します。