ハンバーガーメニュー CSSギャラリーとは、3本線が×に変わるアイコン変形60種と、ドロワー・フルスクリーンなどの開閉アニメーション30種を実際にクリックして試し、HTML+CSS+JSをワンクリックでコピーできる無料ツールです。外部ライブラリは不要で、アクセント色を自分のサイトに合わせてからコードを取得できます。
「スマホのヘッダーにメニューを付けたいが、3本線が×に変わる動きをどう書けばいいのか毎回調べ直している」「ドロワーが右から出るコードは見つかったが、アイコンの変形は別のサイトから持ってきて組み合わせている」——ハンバーガーメニューは実装頻度が高いわりに、アイコンの動きとメニューの出方という2つの独立したパーツを毎回別々に探して合体させるという、地味に面倒な作業が発生しがちです。
この記事では、CodeQuest.workが公開している無料ツール「ハンバーガーメニュー CSSギャラリー」の特徴と使い方を、実際の操作の流れに沿って解説します。アイコン変形と開閉パターンをタブで切り替えて見比べ、その場でクリックして動きを確かめてから、そのまま貼れるコード一式を取得できるツールです。
ハンバーガーメニュー CSSギャラリーとは
ハンバーガーメニュー CSSギャラリーは、ブラウザだけで完結する開閉メニューの試用＆コード取得ツールです。基本の流れは「クリックして試す → 選ぶ → コピペ」の3ステップだけ。カードのボタンを押すと本番と同じ動きがその場で再生され、気に入ったものはHTML・CSS・JSのセットをワンクリックでコピーできます。
このツールの特徴は、収録内容が「アイコン変形」と「開閉パターン」の2モードに分かれていることです。前者はボタン自身の見た目（3本線が×や矢印に変わる動き）、後者はボタンを押したあとにメニューがどう現れるか（ドロワー・フルスクリーン・ドロップダウン）を担当します。この2つは独立して選べるため、「アイコンはシンプルな定番、メニューは全画面で派手に」といった組み合わせが自由に作れます。
なお、このギャラリーは「完成品を選んで貼る」ためのツールです。開閉の仕組みそのものを理解して一から自分で組みたい場合は、ハンバーガーメニューをCSSとJavaScriptで実装する解説記事のほうが目的に合います。「選んでコピペするのがギャラリー、構造から理解するのが実装記事」という棲み分けです。
このツールでできること
機能はシンプルに絞られています。登録やインストールは不要で、ページを開いた瞬間から使えます。
- クリックして試す：カード内のボタンを押すと、本番と同じ開閉アニメーションをその場で再生
- 2モードをタブで切り替え：アイコン変形（60種）と開閉パターン（30種）を上部タブで行き来
- カテゴリで絞り込み：定番・回転・スライド・矢印/記号・枠/背景・応用などのチップで一覧を絞る
- HTML+CSS+JSをワンクリックコピー：各カードのコピーボタンで、そのまま貼れるコード一式を取得
- コードプレビュー：カードを選ぶとサイドバーに全コードを表示。貼る前に中身を確認できる
- 色のカスタマイズ：アクセント色・サブ色をカラーピッカーで変更すると、プレビューとコピーされるコードの両方に即反映
- 開いたメニューを一括で閉じる：試している途中で画面が塞がったときは「開いているメニューを全部閉じる」で復帰
コピーされるコードは <style> タグ入りのCSS、HTML、そして開閉を切り替える <script> のセットです。CodePenやローカルのHTMLファイルにそのまま貼れば、その場で同じ動きが再現されます。なお、CodeQuest.workではこのほかにもCSS系の無料ツールを公開しており、全体像はCSSの装飾・アニメーションを作る無料ジェネレーターまとめで確認できます。
使い方は3ステップ
操作は難しくありません。ツールを開いてから実装に取りかかるまで、次の3ステップで完了します。
- モードを選ぶ：まず上部のタブで「アイコン変形」か「開閉パターン」かを決めます。ボタンの動きだけが欲しいのか、メニュー全体の出方まで欲しいのかで入口が変わります。
- クリックして見比べる：カテゴリのチップで絞り込み、気になるカードのボタンを実際に押します。もう一度押せば閉じるので、開閉の往復まで確認できます。
- 色を合わせてコピーする：サイドバーでアクセント色を自分のサイトのブランドカラーに変え、コピーボタンを押します。コードには変更後の色がそのまま入っています。
色を先に決めてからコピーするのがポイントです。あとから手作業でHEX値を置換すると、影やボーダーなど同じ色を参照している箇所を見落としやすくなります。
アイコン変形の6カテゴリ
アイコン変形モードには、ボタンそのものの動きが60種類収録されています。すべて「3本線が別の形に変わる」動きですが、変わり方の性格ごとに6つのカテゴリへ整理されています。
| カテゴリ | 種類数 | 代表例 |
|---|---|---|
| 定番 | 10種 | クロス／中央が縮んで消える／スクイーズ／フェードで×に入れ替わる／プラスになる |
| 回転 | 10種 | ボタンごと回る／半周してから×になる／中心を軸にひねる |
| スライド | 10種 | 中央が左へ滑って消える／線が横へ抜けてから×が現れる |
| 矢印・記号 | 10種 | 戻る矢印になる／下向き矢印になる／記号へ切り替わる |
| 枠・背景 | 10種 | 枠線が描かれる／背景が塗りつぶされる／円形の背景が広がる |
| 応用 | 10種 | 弾む×／MENU⇔CLOSEの文字が入れ替わる／2段モーション |
定番系：まず候補に入れたい基本の変形
迷ったらまず見るべきなのが定番カテゴリです。もっとも使用頻度が高い「クロス」は、3本の線を transform で上下に散らしておき、開いたときに上下を回転させ、中央を opacity: 0 で消すという構成になっています。
.hb-cross span {
position: absolute; left: 9px; top: 50%; width: 30px; height: 3px; margin-top: -1.5px;
background: #6366f1; border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.hb-cross span:nth-child(1) { transform: translateY(-9px); }
.hb-cross span:nth-child(3) { transform: translateY(9px); }
.hb-cross[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.hb-cross[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hb-cross[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }線3本を span で置いているだけなので、HTMLは button 要素1つで完結します。同じ定番カテゴリでも、中央の線が縮んで消えるもの、いったん寄せてから回転する「スクイーズ」、×ではなくプラス記号になるものなど、印象の違う10種類から選べます。
回転・スライド系：動きに軌跡を持たせる
回転系はボタン全体やそれぞれの線が軸を持って回るタイプ、スライド系は線が横方向へ抜けてから×が現れるタイプです。定番系が「その場で形を変える」のに対し、こちらは変形の途中経過そのものを見せるのが持ち味で、開閉のアクションを印象づけたいサイトに向いています。
一方で回転量が大きいものは、閉じる操作のときに視線が動きに引っ張られます。ヘッダーに常時出ているボタンなら、transition の時間が短めのものを選ぶと操作のテンポを損ないません。
矢印・記号／枠・背景系：意味を持たせる変形
矢印・記号カテゴリは、開いた状態が×ではなく「戻る矢印」や「下向き矢印」になるものです。全画面メニューよりも、パネルが下に伸びるドロップダウンや、階層のある画面で「閉じる＝戻る」と伝えたいときに効きます。
枠・背景カテゴリは線そのものよりボタンの面を動かすタイプで、枠線が一周描かれたり、円形の背景が広がったりします。ボタンの周囲に余白があるヘッダーで、押せる領域をはっきり見せたい場合に相性が良いカテゴリです。
開閉パターンの5カテゴリ
開閉パターンモードは、ボタンを押したあとにメニュー本体がどう現れるかを扱います。こちらはナビゲーションのリンクまで含んだ状態でプレビューされるため、実際のヘッダーに近い見え方で比較できます。
| カテゴリ | 種類数 | どんな出方か |
|---|---|---|
| ドロワー | 8種 | 画面の端（左・右・上・下）からメニューが滑り込む |
| フルスクリーン | 8種 | 画面全体を覆う。フェード・円形リベールなど覆い方に差がある |
| 項目の出方 | 6種 | パネルが開いたあと、リンクが時間差で順に現れる |
| ドロップダウン | 4種 | ヘッダーの下にパネルが伸びる。PCサイトでも使いやすい |
| 応用 | 4種 | 複数の動きを組み合わせた凝ったパターン |
ドロワー系：スマホヘッダーの最有力候補
スマートフォンのヘッダーで最も無難に収まるのがドロワーです。実装は position: fixed で画面外へ逃がしておき、開いたときに transform を 0 に戻すという構成になっています。
.hbp-left__nav {
position: fixed; top: 0; bottom: 0; left: 0; z-index: 20;
width: min(280px, 78%); padding: 60px 24px 20px;
display: flex; flex-direction: column; gap: 14px;
background: #6366f1;
transform: translateX(-100%);
/* 閉じている間はタブ順とアクセシビリティツリーから外す（見えなくしただけではタブで到達できてしまう） */
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.4s;
}
.hbp-left__btn[aria-expanded="true"] ~ .hbp-left__nav {
transform: translateX(0); visibility: visible;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}注目したいのは visibility の扱いです。transform で画面外へ動かしただけだと、閉じているメニューのリンクがタブキーで到達できてしまい、スクリーンリーダーからも読み上げられます。閉じている間は visibility: hidden で隠し、開くときは遅延なしで戻すことで、見た目のアニメーションを保ったまま操作対象から外しています。display: none ではアニメーションが効かないため、この組み合わせが必要になります。
フルスクリーン・項目の出方：印象を作りたいとき
フルスクリーンは画面全体をメニューが覆うタイプで、リンク数が少ないサイトやブランドサイトでよく使われます。単純なフェードのほか、ボタンの位置を中心に円が広がる「円形リベール」のように、覆い方そのものを演出にしているものが揃っています。
「項目の出方」カテゴリは、パネルが開いたあとにリンクが1つずつ順に現れるタイプです。transition-delay を項目ごとにずらして順番を作っており、フルスクリーンと組み合わせると完成度が一段上がります。ただし全項目が出そろうまでの待ち時間が発生するため、リンクが多いサイトでは遅延の合計が長くなりすぎないか確認しておくと安全です。
アイコンと開閉パターンの使い分け
2つのモードは目的が違うため、どちらを選ぶかは「何が欲しいか」で決まります。
| 状況 | 選ぶモード |
|---|---|
| メニューの開閉処理はすでにあり、ボタンの動きだけ差し替えたい | アイコン変形 |
| これから一式作る。メニューの出方まで含めて決めたい | 開閉パターン |
| 既存サイトのデザインに合わせて最小限の変更で済ませたい | アイコン変形 |
| ランディングページなどで開閉自体を見せ場にしたい | 開閉パターン |
開閉パターン側のコードにもボタンのアイコン変形（クロス）が含まれているため、開閉パターンを選べばそれだけで一式が揃います。アイコンだけ別のものに差し替えたい場合は、アイコン変形モードで選んだCSSのうち span に関する記述を、開閉パターン側のボタンのクラス名に合わせて置き換えるとうまくいきます。
アクセント色・サブ色のカスタマイズ
サイドバーには「アクセント色」と「サブ色」の2つのカラーピッカーがあります。アクセント色は線やメニュー背景といった主役の色、サブ色はグラデーションや2色使いのパターンで使われる副色です。
色を変えると一覧のプレビューが即座に切り替わり、その状態でコピーしたコードにも変更後の値が入ります。半透明の影やオーバーレイに使われる rgba() の値も同時に置き換わるため、コピー後にHEXを手で探して直す作業は発生しません。
元に戻したいときは「色をデフォルトに戻す」を押せば初期値に復帰します。複数のパターンを同じブランドカラーで比較したいときは、先に色を決めてから一覧を眺めるほうが判断しやすくなります。
コピーしたコードをヘッダーに組み込む方法
コピーされるのはCSS・HTML・JSの3点セットです。試すだけならそのまま貼れば動きますが、既存サイトに入れるときは少し整理すると扱いやすくなります。
HTMLとJSの配置
HTMLはヘッダー内のボタンを置きたい位置に貼ります。開閉パターンの場合はボタンと nav が親要素でまとまっており、ボタンが先・メニューが後という並び順が前提になっています。CSSが兄弟セレクタで状態を参照しているため、この順番は変えないでください。
JSは次の3行だけです。クラスの付け外しではなく、ボタンの aria-expanded を反転させているのが特徴です。
// 開閉のトグル（aria-expanded を true / false で切り替えるだけ）
document.querySelectorAll(".hb-cross").forEach((btn) => {
btn.addEventListener("click", () => btn.setAttribute("aria-expanded", btn.getAttribute("aria-expanded") !== "true"));
});既存サイトへの馴染ませ方
CSSは既存のスタイルシートへ移し、<style> タグは外します。クラス名は hb- や hbp- の接頭辞が付いているため、既存のスタイルとぶつかる可能性は低いはずです。それでも命名規則を揃えたい場合は、クラス名をまとめて置換すれば問題ありません。
調整することが多いのは、ボタンの固定位置（top / right）と z-index、そしてメニューの幅です。開閉パターンのボタンは position: fixed で画面右上に固定されているので、既存ヘッダーの中に収めたい場合はここを absolute や static に変えてから、親要素側でレイアウトを組みます。
ナビ内のリンクの見た目まで作り込みたい場合は、CSSホバーエフェクトをコピペで使える無料ツールで下線やボーダーの動きを追加すると、メニューの完成度が上がります。
開閉状態は aria-expanded で管理している
このギャラリーのコードには、実装上の方針がひとつ通っています。開閉状態を is-open のようなクラスではなく、ボタンの aria-expanded 属性で表現しているという点です。CSSもこの属性を見て切り替わります。
<button class="hb-cross" aria-label="メニュー" aria-expanded="false">
<span></span><span></span><span></span>
</button>aria-expanded は「この操作要素が制御する領域が展開されているか」を伝えるWAI-ARIAの属性です。W3CのARIA Authoring Practices Guide が示す開閉パターン（Disclosure）でも、トグルするボタンに aria-expanded を持たせることが基本形として説明されています。
状態管理をこの属性に一本化しておくと、実務上のメリットが2つあります。
- 状態が二重管理にならない：クラスと属性の両方を切り替える実装だと、片方の更新を忘れたときに見た目と支援技術への通知がずれます。属性だけを見るようにしておけば、そのずれ自体が起きません
- スクリーンリーダーに開閉が伝わる：ボタンが「展開」「折りたたみ」のどちらの状態かが読み上げられるため、視覚に頼らずに操作できます
あわせて、ボタンには aria-label が付いています。中身が span 3本だけでテキストを持たないため、これがないと読み上げ時に何のボタンか分からなくなるからです。既存サイトへ組み込むときも、この2つの属性は消さずに残しておくことをおすすめします。
こんな場面で使える
実務では次のような場面で時間を節約できます。
- コーポレートサイトのスマホ対応：ヘッダーにドロワーを付ける定番作業。デザインの方向性が決まっていれば数分で候補が絞れます
- デザインカンプの検討段階：静止画では判断しにくい「開いたときの印象」をクライアントと一緒に画面で見比べられます
- ランディングページの制作：フルスクリーンメニューと項目の時間差表示を組み合わせて、ページ全体のトーンに合わせた開閉を作れます
- 既存サイトの部分リニューアル：開閉処理はそのままに、アイコンの動きだけ差し替えて印象を更新できます
- 学習用のサンプル収集：同じ「×になる」動きでも実装方法が複数あることを、コードを見比べながら確認できます
単体のバリエーションとしては、円形に展開するハンバーガーメニューの実装ガイドのような凝ったパターンもあります。ギャラリーで方向性を決めてから、必要に応じて個別記事で作り込むという進め方が効率的です。
使うときにつまずきやすいポイント
コピペで動くコードではありますが、実際のサイトに入れると起きやすい問題がいくつかあります。
メニューを開いても背面がスクロールしてしまう
フルスクリーンやドロワーを開いた状態で画面をスワイプすると、後ろの本文が動いてしまうことがあります。コピーされるコードは開閉の見た目に絞られているため、背面のスクロール制御は入っていません。必要なら、開いたときに body の overflow を hidden にする処理を数行足してください。
position: fixed が親要素の影響で効かない
ドロワーやフルスクリーンは position: fixed で画面に固定していますが、祖先要素に transform や filter、backdrop-filter が指定されていると、固定の基準がその要素に変わってしまい、画面いっぱいに広がらなくなります。「ツールでは正しく動いたのに自分のサイトでは崩れる」場合、まず疑うべきはここです。ヘッダーを囲むラッパーにアニメーション用の transform が残っていないか確認してください。
動きを減らしたいユーザーへの配慮
OSの設定で「視差効果を減らす」を有効にしているユーザーには、大きく動くアニメーションが負担になることがあります。気になる場合は prefers-reduced-motion のメディアクエリで transition の時間を短くする指定を足しておくと安全です。開閉そのものを止める必要はなく、動く時間を詰めるだけでも体感は大きく変わります。
よくある質問
Q. 外部ライブラリは必要ですか？
いいえ。jQueryやアニメーションライブラリの読み込みは不要です。動きはすべてCSSで実装されており、JavaScriptは開閉を切り替える3行だけが付属します。
Q. コピーしたコードはどこに貼ればいいですか？
コピーされるのは <style> タグ入りのCSS、HTML、<script> のセットです。試すだけならHTMLファイルやCodePenにそのまま貼れば動きます。本番サイトではCSSを既存のスタイルシートへ移し、HTMLはヘッダーの該当位置に、JSはページ下部かまとめてあるスクリプトファイルに置くのがきれいな組み込み方です。
Q. アイコンとメニューの出方は別々に選べますか？
はい。上部のタブで「アイコン変形」と「開閉パターン」を切り替えて、それぞれ独立して選べます。開閉パターンのコードには標準のクロス変形が含まれているので、まず開閉パターンを決めてから、必要ならアイコン部分のCSSを差し替える進め方が手戻りが少なくなります。
Q. 色は自分のサイトに合わせて変えられますか？
はい。サイドバーのカラーピッカーでアクセント色とサブ色を変更すると、一覧のプレビューとコピーされるコードの両方に即時反映されます。半透明の指定に使われている rgba() の値も連動して置き換わります。
Q. ハンバーガーメニューの実装記事とはどう使い分けますか？
このギャラリーは「できあがったパターンから選んでコピペする」ためのツールです。開閉の仕組み・状態管理・レスポンシブの切り替えなどを理解して自分で組み立てたい場合は、CSSとJavaScriptによる実装解説の記事を読むほうが目的に合います。デザインを決めるのがギャラリー、構造を学ぶのが実装記事という関係です。
Q. 商用サイトでも無料で使えますか？
はい。ツールの利用もコードの使用も無料で、会員登録は不要です。生成されるのは一般的なCSSとHTMLなので、商用サイトを含めて自由に組み込めます。
まとめ
ハンバーガーメニュー CSSギャラリーは、アイコンの変形とメニューの開き方をそれぞれ試しながら選び、色を合わせて、HTML+CSS+JSをワンクリックでコピーできる無料ツールです。外部ライブラリに依存せず、開閉状態を aria-expanded で管理する構成になっているため、そのまま本番に持っていける形になっています。
ハンバーガーメニューは、スマートフォンで最初に触られる可能性が高いパーツです。動きの良し悪しがサイト全体の印象に直結するので、実装に入る前に一覧をひととおり開閉して、手触りのしっくりくるものを選んでみてください。ページ全体の遷移演出まで作り込みたい場合は、ページ遷移アニメーションをコピペで使える無料ツールと組み合わせると、サイト全体のモーションのトーンを揃えられます。