CSSでレスポンシブナビゲーションメニューを作成する

JPKODA 編集部 May 6, 2026

レスポンシブナビゲーションメニューは、デバイスを問わずシームレスなユーザー体験（UX）を提供するために極めて重要です。ユーザーがデスクトップ、タブレット、スマートフォンのどれを使用していても、ストレスなくウェブサイト内を回遊できるようにする必要があります。

この章では、CSSを使用してシンプルかつ効率的なレスポンシブナビゲーションメニューを作成するための基礎技術を解説します。特にメディアクエリ（Media Queries）を使用して画面サイズに応じてメニューの外観や挙動を調整する方法と、モバイルフレンドリーな「ハンバーガー」メニューの作り方を学びます。

1. 基本構造の理解

CSSを記述する前に、まずはナビゲーションメニューのベースとなるHTML構造を構築しましょう。メニュー項目には無序リスト（<ul>）を使用し、セマンティックな妥当性を確保するために全体を <nav> 要素でラップします。

<nav>
  <a href="#" class="logo">マイ・ウェブサイト</a>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">アバウト</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">コンタクト</a></li>
  </ul>
</nav>

このコードにより、ロゴと4つのメニュー項目を含むシンプルなナビゲーションバーが作成されます。ロゴのリンクに logo クラスを付与しているのは、後のスタイリングを容易にするためです。

2. デスクトップ向けのナビゲーションスタイル設計

まずは、大画面（デスクトップ）向けのスタイルを設計します。フレックスボックス（Flexbox）を使用して、視覚的に整った水平メニューを作成します。

nav {
  background-color: #333;
  color: white;
  padding: 10px 0;
  display: flex; /* フレックスボックスレイアウトを適用 */
  justify-content: space-between; /* ロゴを左、メニューを右に分散配置 */
  align-items: center; /* 垂直方向の中央揃え */
}

nav .logo {
  font-size: 1.5em;
  margin-left: 20px;
  color: white;
  text-decoration: none;
}

nav ul {
  list-style: none; /* リストのデフォルトのドットを削除 */
  margin: 0;
  padding: 0;
  display: flex; /* リスト項目を水平に並べる */
}

nav ul li {
  margin: 0 15px; /* メニュー項目間の余白 */
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

このCSSコードのポイントは以下の通りです：

<nav> に背景色、文字色、パディングを設定。
display: flex を使用して、ロゴが左、メニューが右に来る水平レイアウトを作成。
ロゴのフォントサイズを大きくし、下線を削除。
リストのデフォルトスタイル（ドット）を削除し、マージンとパディングをゼロにリセット。
リスト項目（li）にも display: flex を適用して横並びに配置。
ホバー時に視覚的なフィードバック（下線）を提供。

3. メディアクエリによるレスポンシブ化

メディアクエリはレスポンシブデザインの基石です。デバイスの特性（画面サイズや向きなど）に応じて異なるCSSルールを適用できます。これを使用して、小画面デバイス向けの最適化を行います。

基本的な構文は以下の通りです：

@media (条件) {
  /* 条件が満たされた時に適用されるCSSルール */
}

例えば、画面幅が768ピクセル以下の時のみスタイルを適用する場合は以下のようになります：

@media (max-width: 768px) {
  /* 小画面向けのCSSルール */
}

4. モバイル向け「ハンバーガー」メニューの作成

小画面では、水平なメニューは窮屈になり使い勝手が悪くなります。一般的な解決策は、メニューを「ハンバーガー」アイコン（3本線）の中に折り畳み、ユーザーがクリックした時だけメニュー項目を表示させる手法です。

4.1 ハンバーガーアイコンのHTML追加

まず、ハンバーガーアイコンのHTMLを追加します。ここではシンプルな <div> 内に3つの <span> を配置し、CSSで3本線を表現します。

<nav>
  <a href="#" class="logo">マイ・ウェブサイト</a>
  <div class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">アバウト</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">コンタクト</a></li>
  </ul>
</nav>

4.2 ハンバーガーアイコンのスタイル設計

次に、アイコンのスタイリングを行います。大画面では隠しておき、小画面用のメディアクエリ内でのみ表示させるのがポイントです。

/* デフォルトではハンバーガーアイコンを非表示にする (大画面向け) */
.menu-toggle {
  display: none; 
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  cursor: pointer;
  margin-right: 20px;
}

.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 3px;
}

/* 小画面向けのメディアクエリ */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex; /* 小画面でアイコンを表示 */
  }

  nav ul {
    display: none; /* デフォルトでメニュー項目を隠す */
    flex-direction: column; /* 垂直方向に並べる */
    position: absolute; /* 絶対位置指定 */
    top: 60px; /* ナビゲーションバーの高さに合わせて調整 */
    left: 0;
    width: 100%;
    background-color: #333;
    text-align: center;
  }

  /* 'active' クラスが付与された時にメニューを表示 */
  nav ul.active {
    display: flex; 
  }

  nav ul li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #555;
  }
}

このCSSの重要なポイント：

.menu-toggle はデフォルトで display: none。
メディアクエリ内で .menu-toggle を display: flex に変更して可視化。
nav ul は小画面ではデフォルトで非表示。absolute 配置と column（垂直）方向への変更を行う。
nav ul.active というステータスを用意し、このクラスがある時だけメニューを表示（JavaScriptで制御）。

4.3 JavaScriptによるトグル機能の実装

ハンバーガーメニューを機能させるには、少量のJavaScriptが必要です。ユーザーが .menu-toggle をクリックした際、nav ul に対して active クラスを付け外し（トグル）します。

<script>
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('nav ul');

menuToggle.addEventListener('click', () => {
  menu.classList.toggle('active');
});
</script>

このJavaScriptコードの役割：

ハンバーガーアイコンとメニューリストの要素を選択。
ハンバーガーアイコンにクリックイベントリスナーを追加。
クリックされるたびに、メニューリストの active クラスを切り替える。

5. 強化機能と注意点

5.1 トランジション（Transitions）

メニューの表示をスムーズにするために、<ul> にCSSトランジションを追加できます。

nav ul {
  /* ... 既存のスタイル ... */
  transition: all 0.3s ease; /* スムーズなアニメーションを追加 */
}

注意： display プロパティにはアニメーションを直接適用できないため、より高度なアニメーションを実現するには max-height や opacity を組み合わせる必要があります。

5.2 アクセシビリティ（Accessibility）

メニューをすべてのユーザーにとって使いやすく保つためのポイントです：

セマンティックなタグ（<nav>, <ul>, <a>）を使用する。
ハンバーガーアイコンに代替テキストを提供する（例： aria-label="ナビゲーションの切り替え"）。
メニュー項目がキーボードの Tab キーでフォーカス可能であることを確認する。

5.3 モバイルファースト戦略

本例では「デスクトップファースト」の書き方（デスクトップスタイルを先に書き、max-width で上書きする）を紹介しましたが、現在の推奨はモバイルファーストです。つまり、先にモバイル向けのスタイルを書き、min-width を使用して大画面向けのスタイルを段階的に追加していく手法です。