CSS 📅 2026年5月10日 🔄 更新: 2026-05-10 ⏱ 13分で読めます

レスポンシブなナビゲーションバーの作り方【CSS＋JSハンバーガーメニュー】

スマホ対応のナビゲーションバーをCSS＋JavaScriptで作る方法を初心者向けに解説。ハンバーガーメニューの実装からアクセシビリティ対応まで。

2026年5月10日

導入

Webサイトの上部にある横長のメニュー、見たことありますよね？あれがナビゲーションバー（ナビバー）です。

PCでは横にリンクが並んでいますが、スマホでは画面が狭いので「≡」のようなアイコン（ハンバーガーメニュー）に変わります。タップするとメニューが開く仕組みです。

この記事では、レスポンシブなナビゲーションバーをCSS＋JavaScriptで作ります。

  • PC：横並びのリンク
  • スマホ：ハンバーガーメニュー（タップで開閉）

レスポンシブデザインの基本を知っていると、よりスムーズに理解できます。

Step 1: PC版ナビバーを作る

まず、PC向けの横並びナビバーを作ります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ナビバー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar">
    <a href="/" class="logo">MySite</a>
    <button class="hamburger" id="hamburger" aria-expanded="false" aria-label="メニューを開く">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>
    <ul class="nav-links" id="nav-links">
      <li><a href="#">ホーム</a></li>
      <li><a href="#">作品</a></li>
      <li><a href="#">ブログ</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
  <script src="nav.js"></script>
</body>
</html>

CSS（PC版）

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

body {
  font-family: sans-serif;
}

/* ナビバー全体 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #2c3e50;
}

/* ロゴ */
.logo {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

/* ナビリンク */
.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 4px;
}

.nav-links a:hover {
  background-color: #34495e;
}

/* ハンバーガーボタン（PC版では非表示） */
.hamburger {
  display: none;
}

display: flexとjustify-content: space-betweenで、ロゴを左、リンクを右に配置しています。CSS Flexboxガイドで詳しく学べます。

Step 2: ハンバーガーアイコンを作る

3本線のアイコンをCSSだけで作ります。

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

<span class="bar">を3つ並べて、それぞれに幅と高さを指定するだけです。transitionを入れておくと、後でアニメーションが滑らかになります。

Step 3: メディアクエリでスマホ対応

画面幅が768px以下のとき、ハンバーガーメニューに切り替えます。

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    padding: 20px 0;
    gap: 0;
  }

  .nav-links li {
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: 15px;
  }

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

ポイント：PC版では.hamburgerは非表示、スマホ版では.nav-linksが非表示。.nav-links.activeクラスがついたときだけ表示されます。

Step 4: JavaScriptでメニュー開閉

ハンバーガーボタンをクリックしたら、メニューを開閉する処理を書きます。

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");

hamburger.addEventListener("click", function() {
  navLinks.classList.toggle("active");

  const isOpen = navLinks.classList.contains("active");
  hamburger.setAttribute("aria-expanded", isOpen);
});

classList.toggle("active")は、クラスがあれば外し、なければ追加する便利なメソッドです。1行でメニューの開閉が実現できます。

イベント処理の基本でaddEventListenerの使い方を復習できます。

Step 5: アニメーションを追加する

ハンバーガーアイコンの変形（×に変わる）

/* メニューが開いたときのハンバーガーアイコン */
.hamburger.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

JavaScriptも修正して、ハンバーガーボタンにもactiveクラスを切り替えます。

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");

hamburger.addEventListener("click", function() {
  navLinks.classList.toggle("active");
  hamburger.classList.toggle("active");

  const isOpen = navLinks.classList.contains("active");
  hamburger.setAttribute("aria-expanded", isOpen);
});

メニューのスライドアニメーション

@media (max-width: 768px) {
  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    padding: 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-links.active {
    max-height: 300px;
    padding: 10px 0;
  }
}

max-heightを0から300pxに変化させることで、スライドダウンのアニメーションが実現できます。

Step 6: アクセシビリティ対応

アクセシビリティとは、障がいのある人を含め、すべての人が使いやすいようにすることです。

  • aria-expanded：メニューが開いているかどうかをスクリーンリーダーに伝える
  • aria-label：ボタンの役割を説明する（画面に文字がないため）
  • <button>要素を使う：Tabキーでフォーカスでき、Enterキーで押せる

JavaScriptで開閉するたびにaria-expandedの値を更新しています。これにより、視覚に障がいのある人もメニューの状態がわかります。

完成コード

style.css（全体）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #2c3e50;
  position: relative;
}

.logo {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

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

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 4px;
}

.nav-links a:hover {
  background-color: #34495e;
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    padding: 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .nav-links.active {
    max-height: 300px;
    padding: 10px 0;
  }

  .nav-links li {
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: 15px;
  }
}

nav.js

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");

hamburger.addEventListener("click", function() {
  navLinks.classList.toggle("active");
  hamburger.classList.toggle("active");

  const isOpen = navLinks.classList.contains("active");
  hamburger.setAttribute("aria-expanded", isOpen);
});

カスタマイズのアイデア

  • 色を変える：background-colorを好きな色に
  • ロゴを画像にする：<a>の中に<img>を入れる
  • リンクを増やす：<li>を追加するだけ
  • 固定ナビバー：position: fixed; top: 0;を追加

CSSの基本で、色やサイズの変え方を復習できます。

まとめ

  • ✅ PC：Flexboxで横並びリンク
  • ✅ スマホ：ハンバーガーメニュー（タップで開閉）
  • ✅ アニメーション：≡ → × の変形、スライドダウン
  • ✅ アクセシビリティ：aria-expanded、キーボード操作対応
  • ✅ classList.toggleで簡単にクラスを切り替え

ナビバーはほぼすべてのWebサイトで使います。一度作り方を覚えれば、どんなサイトにも応用できます。

🎯 次のステップ

ナビバーを作れたら、さらにスキルアップしよう！

目次

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

関連記事

CSS

レスポンシブデザインの作り方【初心者向け】

レスポンシブCSSの作り方を初心者向けに解説。メディアクエリの書き方・スマホ対応の基本をコード例で学べます。

 CSS

CSSの中央揃えができない原因と解決法まとめ【全パターン網羅】 | プログラミング入門

CSSの中央揃えの全パターンを解説。テキスト、ブロック要素、Flexbox、Grid、上下中央揃えの方法と、うまくいかない原因を紹介。中高生向け。無料。

 CSS

CSS の記事一覧

この記事に出てくる用語

𝕏 シェア LINE シェア

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

スマホ対応のナビゲーションバーをCSS＋JavaScriptで作る方法を初心者向けに解説。ハンバーガーメニューの実装からアクセシビリティ対応まで。

出典: https://start-web-programming.com/blog/css-responsive-navbar-tutorial/