チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

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

 スポンサード リンク

f:id:chipsforest:20160608195220j:plain:w200

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

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

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

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

アイコン完成品

menu

 完成品はこんな感じ。

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

HTML

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

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

CSS

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

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

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

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


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


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

広告を非表示にする

PAGE TOP