【CSS】ハンバーガーメニューボタンの作り方

CSSでハンバーガーメニューを作る方法を解説します。

【CSS】ハンバーガーメニューの作り方

巷では『ハンバーガーメニューはオワコン！』みたいな声も聞こえたりしますが、私の観測範囲だとSPのメニュー開閉でハンバーガーボタン以外はほとんど見たことないので、まだまだこれからも使い続けるんじゃないかなーという所感です。

ハンバーガーボタンの代替案とかあれば教えてください！

さて、さっそくですが私のハンバーガーボタンはこんな感じです↓

カンタンに解説しますと、３本のバーを包む div でボタン自体の大きさを指定し、position:relative を当てます。

次に div で包んだ３本の線を position:absolute で位置を指定します。

これだけです。

セマンティックなHTMLを書く上でリンクではないクリッカブルな要素は本来 buttonタグで実装すべきだと思うのですが、buttonタグを用いた場合はブラウザ標準のスタイルが当てられます。

で、案件でブラウザ標準のスタイルがそのまま使えるハンバーガーメニューのデザインなんてまずないので、否応なしにリセットせざるを得ないのですが、その場合 outline: none; を当てなくてはなりません。

この outline というCSSのプロパティですが、こちらを none にすることがアクセシビリティ的によろしくないので、（詳しくは↓）

３本バーを包む div に

しております。