ハンバーガーメニューは、レスポンシブデザインにおける重要なUIコンポーネントの一つです。特に、スマートフォンやタブレットなどの小さな画面でのナビゲーションをシンプルにするために欠かせません。
この記事では、CSSとJavaScriptを使ってハンバーガーメニューを実装する方法を、実際のコード例を交えながら解説します。初心者にもわかりやすいステップで進めますので、ぜひ一緒に試してみてください！
1. ハンバーガーメニューとは？
ハンバーガーメニューは、3本線のアイコンをクリックまたはタップすると、隠れていたナビゲーションメニューが表示される仕組みです。以下のような場面で活用されます：
- スマートフォン対応のレスポンシブデザイン
- シンプルなUIデザインを採用したい場合
- スペースを節約する必要がある場合
2. 実装の概要
今回の記事では、以下の技術を使用してハンバーガーメニューを作成します：
- HTML: メニューの構造を定義
- CSS: ハンバーガーメニューのデザインとアニメーションを作成
- JavaScript: メニューの開閉動作を実現
3. 実装ステップ
以下のコードを参考に、実際にハンバーガーメニューを作成していきます。
See the Pen ハンバーガーメニュー by masakazuimai (@masakazuimai) on CodePen.
4. カスタマイズポイント
このハンバーガーメニューをさらに魅力的にするために、以下のカスタマイズを試してみましょう：
- アニメーションの追加: CSSトランジションやアニメーションを使って動きを滑らかに。
- レスポンシブデザイン: メディアクエリを使用して、デバイスごとにメニューのデザインを調整。
ハンバーガーメニューのアクセシビリティ対応
ハンバーガーメニューはキーボードやスクリーンリーダーでの操作も考慮する必要があります。WCAG 2.1に準拠するために、以下のaria属性を実装してください。
<button
class="hamburger"
aria-expanded="false"
aria-controls="nav-menu"
aria-label="メニューを開く"
>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
<nav id="nav-menu" role="navigation" aria-label="メインメニュー">
<!-- メニュー項目 -->
</nav>- aria-expanded： メニューの開閉状態をスクリーンリーダーに伝える。JavaScriptで開閉時にtrue/falseを切り替える
- aria-controls： ボタンが制御するメニューのIDを指定する
- aria-label： ボタンの目的を明示する（テキストがない場合に必須）
- Escキー対応： メニューが開いている状態でEscキーを押すと閉じる挙動を追加する
- フォーカストラップ： メニューが開いている間、Tabキーでのフォーカスがメニュー内に留まるようにする
ハンバーガーメニューの種類と選び方
| 種類 | 動作 | 適したケース |
|---|---|---|
| スライドイン（右から） | 画面右からメニューがスライド表示 | 一般的なサイト、EC |
| スライドイン（左から） | 画面左からメニューがスライド表示 | 管理画面、ダッシュボード |
| フルスクリーン | 画面全体をメニューで覆う | ブランドサイト、ポートフォリオ |
| ドロップダウン | ヘッダー下にメニューが展開 | シンプルなナビゲーション |
| オフキャンバス | メイン領域ごとスライドしてメニュー表示 | アプリライクなUI |
5. まとめ
今回の記事では、CSSとJavaScriptを使用してハンバーガーメニューを実装する方法をご紹介しました。このシンプルなUIコンポーネントを使えば、レスポンシブデザインを簡単に実現できます。
さらに高度なカスタマイズを試してみたい方は、アニメーションや高度なJavaScriptロジックを追加してみてください！
実務Tips（ベストプラクティス集）
シンプルな実装から始める
まずはCSSだけで作るシンプルなハンバーガーメニューを試すと理解しやすいです。その後、JavaScriptを追加してアニメーションや開閉制御を拡張すると効率的です。
アクセシビリティを考慮する
buttonタグにaria-expandedやaria-controlsを設定し、スクリーンリーダー対応を意識することでユーザー体験を高められます。
トランジションやアニメーションを活用する
メニューが開閉する際にtransformやopacityを組み合わせると、自然で見やすい動きになります。CSSアニメーションよりもGSAPなどのライブラリを使うと高度な演出も可能です。
レスポンシブ設計を前提にする
PCでは通常のナビゲーション、スマホではハンバーガーメニューといったように、メディアクエリを活用して切り替えるとUXが向上します。
メニュー表示の状態管理を明確にする
JavaScriptで開閉を管理する場合、openクラスの付け外しを軸にするとコードがシンプルになります。状態管理が複雑にならないよう注意しましょう。
よくある質問
Q. CSSだけでハンバーガーメニューは作れますか？
はい、チェックボックスハックを使えばCSSのみで実装可能です。ただし、JavaScriptを併用した方が柔軟で管理しやすいです。
Q. アクセシビリティ対応は必要ですか？
必要です。aria属性を付与することで、キーボード操作やスクリーンリーダーでも正しく利用できるようになります。
Q. メニューの開閉アニメーションはどう作ればいいですか？
transitionやtransformを使うのが基本です。複雑な動きを付けたい場合はGSAPやanime.jsなどのアニメーションライブラリを検討すると良いです。
Q. ハンバーガーメニューはどの画面サイズで出すべきですか？
一般的にはタブレットやスマホなど幅が768px以下の画面で採用します。ユーザー層に合わせてメディアクエリを調整しましょう。
Q. ハンバーガーメニューはSEOに影響しますか？
メニューを非表示にしてもHTML上は存在するため、基本的にSEOには悪影響はありません。ただし、重要なリンクは隠さずナビゲーションに残すのが安心です。
