PCでは横並びにする（レスポンシブメニューの完成）

ここまでで、スマホ用のハンバーガーメニューができました。最後に、画面の幅が広いときはボタンを消して、メニューを横並びにするCSSを足します。これでレスポンシブメニューの完成です。

スマホで閉じている状態・開いた状態と、PCで横並びになった状態 — 幅によって、表示が切り替わる

メディアクエリで「幅が広いとき」だけCSSを足す

幅によってCSSを切り替えるには、メディアクエリ（@media）を使います。モバイルファーストで作っているので、「〇〇px以上のとき」という意味の min-width を使います。

/* ---- 768px以上（タブレット横・PC）では横並びにする ---- */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;            /* ボタンは使わないので消す */
  }
  .global-nav {
    position: static;         /* 固定をやめて、ふつうの位置に戻す */
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    background: none;
    color: #333;
    transition: none;
  }
  .global-nav ul {
    display: flex;            /* 横並び */
    gap: 28px;
  }
  .global-nav a {
    padding: 4px 0;
    border-bottom: 2px solid transparent;
  }
  .global-nav a:hover {
    border-bottom-color: #c8a27a;
  }
}

書いていること

.menu-toggle … PCではボタンを使わないので display: none で消します。
.global-nav … position: static で「画面に固定」をやめ、ふつうの位置（ヘッダーの右側）に戻します。幅・高さ・背景色など、スマホ用に付けたスタイルも元に戻します。
.global-nav ul … display: flex で横並びにします。

【ポイント】スマホ用のCSSは、そのまま残す
メディアクエリの中には、PCで変えたいところだけを書きます。スマホ用のCSSを消したり書き直したりする必要はありません。

768pxの理由

幅がいくつになったら横並びにするか（ブレークポイント）は、メニューの数と文字の長さで決めます。今回はメニューが5つあり、600pxでは横に並べきれないので、768px（タブレットを横にしたくらいの幅）にしました。メニューが3〜4つなら600pxでも並びます。レスポンシブウェブデザインのレッスンで学んだ600pxを基本に、実際に幅を変えて確かめながら決めましょう。

完成したコード

HTML・CSS・JavaScriptの全体です。1つのHTMLファイルに書いてあるので、コピーしてそのまま試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PCでは横並びにする（完成版）｜ウェブデザイナーの教科書</title>
<style>
/* ---- 土台（どのステップでも共通） ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #333;
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 5%;
  background: #fff;
}
.logo { font-size: 1.4rem; font-weight: bold; letter-spacing: .05em; }

.hero {
  height: 50vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #c8a27a, #6b4f3a);
  color: #fff;
  font-size: 1.6rem;
}
.content { max-width: 720px; margin: 0 auto; padding: 40px 5%; }

/* ---- 三本線のボタン（button要素） ---- */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 20;
}
.menu-toggle .bar {
  display: block;
  width: 32px;
  height: 4px;
  background: #333;
  border-radius: 4px;
  transition: transform .3s, opacity .3s, background .3s;
}
/* ボタンに is-open が付いたら「×」に */
.menu-toggle.is-open .bar:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.menu-toggle.is-open .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .bar:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }
.menu-toggle.is-open .bar { background: #fff; }

/* 画面には見せず、読み上げソフトには伝える文字 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- メニュー本体 ---- */
.global-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 360px;
  height: 100vh;
  padding: 90px 30px 30px;
  background: #3b2a20;
  color: #fff;
  transition: right .4s;
  z-index: 10;
}
.global-nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
/* メニューに is-open が付いたら画面の中へ */
.global-nav.is-open {
  right: 0;
}

/* ---- 768px以上（タブレット横・PC）では横並びにする ---- */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;            /* ボタンは使わないので消す */
  }
  .global-nav {
    position: static;         /* 固定をやめて、ふつうの位置に戻す */
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    background: none;
    color: #333;
    transition: none;
  }
  .global-nav ul {
    display: flex;            /* 横並び */
    gap: 28px;
  }
  .global-nav a {
    padding: 4px 0;
    border-bottom: 2px solid transparent;
  }
  .global-nav a:hover {
    border-bottom-color: #c8a27a;
  }
}
</style>
</head>
<body>
  <header class="header">
    <a class="logo" href="#">Sample Cafe</a>
    <button class="menu-toggle" id="menu-toggle" aria-controls="global-nav" aria-expanded="false">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="visually-hidden">メニュー</span>
    </button>
    <nav class="global-nav" id="global-nav">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">コンセプト</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">店舗案内</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="hero">Sample Cafe</div>
    <div class="content">
      <p>画面の幅が768px以上になると、メニューが横並びになります。</p>
      <p>ここにコンテンツが入ります。ブラウザの幅を変えたり、スマートフォンで開いたりして動きを確かめてみましょう。</p>
    </div>
  </main>
  <script>
    const toggle = document.getElementById('menu-toggle');  // ボタン
    const nav = document.getElementById('global-nav');      // メニュー

    // ボタンを押すたびに、開く・閉じるを切り替える
    toggle.addEventListener('click', function () {
      const isOpen = toggle.classList.toggle('is-open');   // 付いていなければ付ける・付いていれば外す
      nav.classList.toggle('is-open', isOpen);             // メニューもボタンと同じ状態に
      toggle.setAttribute('aria-expanded', isOpen);        // 開いているかどうかを読み上げソフトに伝える
    });

    // メニューの中のリンクを押したら閉じる（ページ内リンク用）
    nav.querySelectorAll('a').forEach(function (link) {
      link.addEventListener('click', function () {
        toggle.classList.remove('is-open');
        nav.classList.remove('is-open');
        toggle.setAttribute('aria-expanded', false);
      });
    });
  </script>
</body>
</html>

表示を確かめる方法

Google Chromeでページを開き、右クリック →「検証」でデベロッパーツールを開きます。
左上のスマホとタブレットのアイコン（デバイスツールバー）を押します。
画面の幅を変えながら、768pxを境にメニューが切り替わるかを確かめます。

【つまずきやすいところ】スマホで見ると、PCの表示が縮んで見える
<head> の中に <meta name="viewport" content="width=device-width, initial-scale=1"> が書いてあるか確認しましょう。これがないと、スマホでもPCの幅で表示されて、メディアクエリが思ったとおりに効きません。

まとめ

モバイルファーストで作り、PC用の変更は @media (min-width: 〇〇px) の中に書く
PCではボタンを消し、メニューを position: static で元の位置に戻して flex で横並びにする
ブレークポイントは、メニューの数と文字の長さを見て決める

これでハンバーガーメニューの完成です。WordPressでテーマを作るときも、同じしくみでメニューを作れます。