English

使い方・FAQ

ハンバーガーメニュー CSSギャラリーの使い方とよくある質問

🖱️ 基本の使い方

  1. 上部のタブで「アイコン変形」（60種）と「開閉パターン」（30種）を切り替えます
  2. カードの中のハンバーガーボタンをクリックすると、その場で開閉の動きが再生されます。もう一度クリックで閉じます
  3. カテゴリチップで絞り込めます（アイコン変形＝定番・回転・スライド・矢印・記号・枠・背景・応用／開閉パターン＝ドロワー・フルスクリーン・項目の出方・ドロップダウン・応用）
  4. 気に入ったら HTML+CSS+JS ボタンでコードをコピー。カードをクリックするとサイドバーでコード全文を確認できます
  5. サイドバーの色の設定でアクセント色・サブ色を変更すると、プレビューとコピーコードの両方に反映されます（色は自動保存されます）
  6. カードを開いたままにしすぎたら「開いているメニューを全部閉じる」で一括リセットできます

🧩 既存サイトへの組み込み手順

  1. コピーした <style> の中身をCSSファイルへ移す
  2. コピーした <script> の中身をJSファイルへ移す（読み込みは defer か </body> 直前で）
  3. HTMLは既存のヘッダーのボタンとナビに、コピーコードと同じ class を付け替える
  4. ナビの中身（<a href="#">Home</a> など）を実際のリンクに差し替える

ボタンの初期状態は必ず aria-expanded="false" にしてください。この属性がCSSのセレクタと支援技術への通知を兼ねているため、書き忘れると開いた状態から始まってしまいます。

<button class="hb-cross" aria-label="メニュー" aria-expanded="false">
  <span></span><span></span><span></span>
</button>

📐 アイコン変形と開閉パターンの組み合わせ方

2つのタブは別々のコードですが、組み合わせて使えます。開閉パターンのボタン部分（◯◯__btn のCSS）を、好きなアイコン変形のCSSで置き換えるだけです。

  1. まず「開閉パターン」から使いたいメニューの出し方をコピーする
  2. 次に「アイコン変形」から好きなアイコンをコピーし、その span 関連のCSSでボタン部分を上書きする
  3. class名は開閉パターン側（◯◯__btn）に合わせる

❓ よくある質問

Q. コピーしたコードはどう使えばいいですか？
A. コピーされるのは <style> タグ入りのCSS・HTML・開閉用の3行のJavaScriptのセットです。まずそのまま貼り付けて動きを確認し、その後 <style> の中身をCSSファイルへ、<script> の中身をJSファイルへ移すのがおすすめです。HTML側は既存のヘッダーにあるボタンとナビへ class を付け替えてください。
Q. JavaScriptは必要ですか？
A. aria-expanded を true / false で切り替える3行だけ必要です。見た目の動きはすべてCSSで、外部ライブラリの読み込みはありません。チェックボックスを使えばJavaScriptなしでも作れますが、スクリーンリーダーにボタンとして認識されないため、本ツールでは button 要素を使う実装で統一しています。
Q. なぜ class の付け外しではなく aria-expanded を使うのですか？
A. aria-expanded はメニューが開いているかどうかをスクリーンリーダーへ伝えるための属性です。これをCSSのセレクタとしても使うことで、状態の管理場所が1つになり、支援技術への通知と見た目の切り替えがずれません。is-open のようなクラスを別に持つ必要がなくなります。
Q. 色を自分のサイトに合わせられますか？
A. サイドバーの「色の設定」でアクセント色とサブ色を変更すると、プレビューとコピーされるコードの両方に反映されます。設定はブラウザに保存されるため次回も引き継がれます。線の太さや文字色などその他の値はコピー後にCSSを直接編集してください。
Q. 開閉パターンの position: fixed はそのまま使えますか？
A. そのまま使えます。ギャラリー上ではカード内に収まって見えますが、これはデモ枠に transform を指定して固定位置の基準をカードに移しているためで、コピーされるコードは実際のサイト用の position: fixed のままです。ただし transform や filter を持つ親要素の中に置くと同じ理由で画面全体には広がらないため、ヘッダー直下など浅い階層に配置してください。
Q. 商用サイトで使えますか？
A. はい。コピーしたコードは個人・商用を問わず自由に利用できます。クレジット表記も不要です。
Q. 一部の動きが再現されないブラウザはありますか？
A. 「高さがアコーディオンで開く」は grid-template-rows のアニメーション、「ガラス（すりガラス）ドロワー」「ガラス風の丸ボタン」は backdrop-filter、「ボタンから円形に広がる」は clip-path を使います。いずれも最新のChrome / Edge / Safari / Firefoxで動作しますが、古いブラウザでは動きが省略されることがあります。その場合もメニュー自体は開閉するため、機能は損なわれません。

🔗 関連ツール

← ギャラリーに戻る