メニューの三本線「ハンバーガーメニュー」を HTML と CSS だけで実装する方法

2017/02/15 ,

スマホでサイト閲覧している時によく見掛けるメニューの横にある三本線、ハンバーガーメニューと呼ばれ、場所を取らずシンプルにメニューが表示されるものであることを示すことができる、横幅の短い画面に最適なアイコンです。

大手サイトを見ると、画像ファイルを用意して埋め込んでいるケースが多いですね。しかしこの程度であればわざわざ画像ファイルを用意する必要はありません。デザインが変わる度に画像を用意しなくてはいけないのは手間が掛かります。HTML + CSS だけで実装してしまえば、カラーコードを変えるだけで様々なサイトにも適用できます。

Font Awesome のような Web アイコンフォントを使うのも1つの手段ではありますが、CDN で読み込んだ時のタイムラグが個人的には気になってしまったので、ファーストビューに即座に表示する方法としては、css で実装するのは最適と思われます。

それでは実際に作成方法を見てみましょう。

ハンバーガーメニューのアイコンを HTML と CSS で実装する

ハンバーガーメニューの実装その1

まずはシンプルに三本線だけを表示する方法です。HTML は次の通り。

ここでは div タグを用いていますが、後述の css で インラインブロック要素として指定するため、span タグを利用しても構いません。しかしその際は css 側の指定も変わるのでご注意を。

続いて CSS です。

ハンバーガーメニューのサンプルその1

それでは実際に HTML 出力したものをご覧ください。

いかがでしょう。スマホサイトでよく見かける三本線のハンバーガーメニューの完成です。画像ファイルを使用していないので拡大してもぼやけることはありません。ここで vertical-align を設定している理由は、ハンバーガーメニューに続いて「メニュー」等の文字を設定するのに上下中央寄せにするためです。アイコンのみ表示する場合は設定不要です。

ハンバーガーメニューの実装その2

ただ三本線を表示するだけで寂しいのであれば、枠線をつけてしまいましょう。HTML は先程と同様です。CSS のみ少し変更を加えます。

padding で余白調整をして外側の要素にボーダーを設定しています。

ハンバーガーメニューのサンプルその2

HTML 出力すると次のようなイメージになります。

四角い枠と違って、余白を大きく取る必要があります。

ハンバーガーメニューの実装その3

前項の枠線の設定を変更すれば、丸枠を付けることも可能です。個人的には丸枠が一番クリック動作を促しやすいものではないかと感じています。こちらも HTML 自体は特に変更はありません。

ハンバーガーメニューのサンプルその3

丸枠アイコンも簡単に実装できてしまいます。

以上、3つのサンプルをご覧いただきましたが、CSS の設定を変えることでバーや枠線の色、ハンバーガーメニューのサイズを変更することが出来ます。上記のソースコードをベースに、サイトに合ったデザインを適用させてみてください。

PAGE TOP ↑