はじめに

今回は、自作のWebサイトにハンバーガーメニューを右上に設置し、スマートフォンでの表示に対応した実装例をご紹介します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

ナビゲーションバーが画面幅に収まりきらず崩れてしまう状況を改善するために、レスポンシブ対応の一環として導入しました。

書こうと思ったきっかけ

きっかけは、自分のスマホでWebサイトを確認したときに、「メニューが重なって読めない」「リンクが押しにくい」と感じたことでした。

PCでは問題なく表示されていたナビゲーションも、スマホではUIの邪魔になっていました。

そこで、「よく見るあの三本線（＝ハンバーガーメニュー）を入れてみよう」と思い、実装に挑戦しました。

ハンバーガーメニューとは？

ハンバーガーメニューは、3本の横線で構成されたアイコンで、クリックやタップすることでメニューの開閉を行う仕組みです。
特にスマートフォンなど画面が狭いデバイスで、ナビゲーションをコンパクトにまとめておきたいときに便利です。

内容について（実装コード紹介）

HTML

<header>
  <div class="header-title">
    <img src="images/logo1.png" alt="ロゴ" style="height: 50px; margin-right: 10px;">
  </div>

  <!-- ハンバーガーメニュー -->
  <div class="hamburger" id="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <!-- ナビゲーション -->
  <nav class="nav-menu" id="nav-menu">
    <a href="index.html">HOME</a>
    <a href="greeting.html">代表挨拶</a>
    <a href="office.html">事務所案内</a>
    <a href="services.html">サービス案内</a>
    <a href="pricing.html">料金案内</a>
    <a href="contact.html">お問い合わせ</a>
    <a href="support-a.html">就労支援A型</a>
  </nav>
</header>

CSS（style2.css に追加）

/* ハンバーガーアイコン */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 20px;
  z-index: 1100;
}
.hamburger span {
  height: 3px;
  background: #333;
  border-radius: 2px;
  transition: 0.3s;
}

/* ハンバーガー開閉時のアニメーション */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ナビゲーションの表示切替 */
.nav-menu {
  display: flex;
  gap: 15px;
}
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 70px;
    right: 20px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  .nav-menu.active {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
}

JavaScript（HTMLの末尾に追加）

<script>
  const hamburger = document.getElementById('hamburger');
  const navMenu = document.getElementById('nav-menu');

  hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('open');
    navMenu.classList.toggle('active');
  });
</script>

まとめ

ハンバーガーメニューの導入により、スマートフォンなどの小さな画面でも快適に操作できるナビゲーションを実現できました。

特にスマホユーザーの閲覧体験を損なわないUI設計は、今後のサイト制作においても重要だと感じています。

今回は基本的な開閉機能のみでしたが、アニメーションやARIA属性の追加など、さらなる改善にも挑戦していきたいと思います。