CSSでハンバーガーアイコンを作ってみた｜ハンバーガーボタンの作り方解説

　ハンバーガーアイコンとは上画の様なボタンのことで、ボタンを押すとメニューや設定画面と等が開きます。

　スマホ用のサイトとかで良く見かけるようになりましたね。

　今回はハンバーガーアイコンをCSSを使って作ってみたので紹介します。

※今回紹介するのはハンバーガーアイコンのみの作成方法なので、完成したものをタップしても動作はしません。

アイコン完成品

menu

　完成品はこんな感じ。

　サイズ・色・文字（menu）の有無が変更可能です。

HTML

　今回は分かりやすいようにハンバーガー部分の下に「menu」という文字を入れました。

　文字部分がいらない場合はspan部分を消去でOK。

CSS

　分かりやすいようにコメント入れておきました。

　「h-menu」はアイコンの枠部分、「h-text」は文字部分、「h-icon」はハンバーガー部分のスタイルです。

　上記CSS内の「border-radius」以外の全ての数値に同じ倍率を掛けて変更すれば、アイコンのサイズを変更することが出来ます。

　例：サイズを2倍にしたい場合は、すべての数値を2倍に変更

　色を変更したい場合は「background-color」部分を変更すればOKです。

　↑今回作ったハンバーガーアイコンを利用したドロップダウンメニューも作ってみたので、見ていただけると幸いです。