中央寄り → 広がる伸縮型
このボタンは閉じた状態で 長さの違う 3 本線 を右寄せに並べ、開くと両端まで広がって X 形になる伸縮型のメニューです。各線の幅を 32px ・ 22px ・ 28px と意図的にずらすことで、左に余白が空いた抜け感のある表情になります。
解説
このボタンは閉じた状態で長さの違う 3 本線を右寄せに並べ、開くと両端まで広がって X 形になる伸縮型のメニューです。各線の幅を 32px・22px・28px と意図的にずらすことで、左に余白が空いた抜け感のある表情になります。transform-origin:right center を基準に線が伸び縮みし、中央の線は width:0 に縮んで消えます。動きは CSS の transition のみ、JavaScript は aria-pressed の真偽を入れ替える役だけです。
合うシーン
- 余白を大切にするミニマルなポートフォリオやブランドサイト
- 装飾を抑えたモード系・編集系のヘッダー
- 背景に溶け込ませたい透過配置のメニュー
枠も背景も持たない設計なので、置く場所の地色とのコントラストだけ確保すれば馴染みます。線色 #1a1a2e を背景に合わせて変え、暗い面では明色にしてください。線が右端で開くため、ボタン全体の当たり判定（タップ領域）は 60px 角を保ち、見た目より小さくしないのがアクセシビリティ上のコツです。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
線がずれて見えるのは仕様ですか？
はい。閉じた状態で 3 本の幅をあえて変え、右寄せにすることでミニマルな抜け感を出す設計です。揃えたい場合は各 nth-child の width を同じ値にすれば均一なハンバーガーになります。
暗い背景でも使えますか？
使えます。線色の #1a1a2e を白や明るい色に変えるだけで暗い背景にも対応します。枠線や塗りがない分、地色との明度差を確保することだけ意識してください。