シームレスな体験！HTML/CSSとJavaScriptで作る洗練ドロワーメニュー

本記事では、Webサイトのユーザー体験を向上させるためのレスポンシブなドロワーメニューの作り方を紹介します。
デスクトップでは常に表示され、モバイルではハンバーガーメニューをクリックすることでスムーズに展開する、この洗練されたメニューの実装方法を、HTML、CSS、JavaScriptを駆使して実現する方法を具体的なコード例とともに解説します。

1. HTMLの基本構造
2. CSSでのスタイリングとレイアウト
3. JavaScriptで動的なメニュー制御
4. 追加の機能とアクセシビリティ
5. まとめと今後の展望
6. 参考リンク

1. HTMLの基本構造

まずは、Webページの基本構造をHTMLで定義します。
ヘッダー内にはロゴ、ナビゲーションメニュー、そしてハンバーガーメニューのボタンを配置します。セマンティックなタグを使用することで、SEOとアクセシビリティが向上します。


<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を用いて、ヘッダーとナビゲーションメニューのデザインを整えます。
デスクトップではメニューが常時表示され、モバイルではハンバーガーメニューをクリックするとメニューが展開されるレスポンシブデザインを実現します。
下記は、基本的なスタイリングと、メディアクエリを利用したモバイル対応の例です。


/* ヘッダーとロゴのスタイル */
.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 li a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}
.nav-list li 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が設定され、スクリーンリーダーでも内容が伝わるように工夫しています。
– ユーザーインタラクション: メニュー項目にホバー効果を追加し、クリック時に視覚的フィードバックを提供。
– パフォーマンス: メディアクエリを活用して、モバイルでは必要なときだけメニューを表示し、不要なDOM要素のレンダリングを防ぎます。

5. まとめと今後の展望

本記事では、HTML、CSS、JavaScriptを駆使して、レスポンシブなドロワーメニュー（ハンバーガーメニュー）を作成する方法を詳しく解説しました。
セマンティックなHTMLで構造を定義し、CSSで美しいレイアウトとレスポンシブ対応を実現、そしてJavaScriptで動的な動作制御を行うことで、シームレスなユーザー体験を提供するメニューが完成します。
この基本をマスターすれば、さらなるカスタマイズや、JavaScriptとの連携による高度なインタラクション機能の実装にも挑戦できるでしょう。
今後は、アニメーションやより複雑なユーザーインターフェースの構築、またアクセシビリティとパフォーマンスのさらなる最適化にも取り組むことで、あなたのWebサイトが一層プロフェッショナルなものになるはずです。

6. 参考リンク

以上が洗練されたドロワーメニューの紹介です。
次回はHTML/CSSとChatGPTの活用方について紹介します。