「ハンバーガーメニューってなに?」
「ヘッダーメニューをレスポンシブ対応させたい」
この記事はそんな方へ向けて書いています。
こんにちは。
エンジニア転職を目指してプログラミング学習をしている、うっちゃんです。
サイト制作を学んでいる中で、ハンバーガーメニューの作り方に悩んでいませんか?
実は初心者でもかんたんに作れるのです。
この記事ではハンバーガーメニューをHTML+CSS+jsで作る方法を紹介します。
目次
ハンバーガーメニューとは

ハンバーガーメニューとは上図のようにサイト内の三本線で表されたナビゲーションメニューです。
主にスマートフォン向けのレスポンシブデザインで使われます。
三本線を押すと隠れていたメニューが表示されます。
ハンバーガーメニューを使うと3つのメリットがあります。
メリット1:メニューと分かりやすい
三本線を押せばメニューが表示されるので、ユーザーが直感的に分かりやすいです。
メリット2:ヘッダーにスペースができる
スペースを取らないため、いろんな見せ方、デザインが可能になります。
ファーストビューで伝えたいメッセージや画像を大きく表示できるため、ユーザーの興味・関心を引きやすいです。
メリット3:デザインの邪魔をしない
三本線だけで表されるので、シンプルな見た目です。
どんなデザインにも馴染むので、Webデザインの邪魔になりません。
ハンバーガーメニューの作り方

今回は初心者向けにシンプルなハンバーガーメニューを作ります。
上図のようにPC向けサイトではPCメニュー、スマホ向けサイトではハンバーガーメニューが表示されるようにします。
コーディングはHTML+CSS+jsで行います。
サイト設計でみた仕組み
HTMLはハンバーガーメニュー、押してから表示されるメニュー、閉じるボタン、PCメニューを作ります。
CSSは見た目を整え、ハンバーガーメニューの表示・非表示を切り替えます。
jsはクリックされた時にCSSを操作するように書いていきます。
HTMLのコーディング
まずはPC版のメニューを作成します。
<header>
<h1>内田裕之のポートフォリオ</h1>
<!-- PC版メニュー -->
<div class="pc-menu">
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">あいさつ</a></li>
<li><a href="#">問い合わせ</a></li>
</ul>
</nav>
</div>
</header>

サイトロゴとヘッダーメニューを横並びにするのはCSSで行います。
詳細な解説記事はこちら
次にハンバーガーメニューのボタンを作りましょう。
ボタンの画像はGoogle Fontsのアイコン集から取ってきます。
Google Fontsの使い方
Google Fontsを使うためにはheadにlinkを書く必要があります。
まずGoogle検索で「material icon guide」と検索します。

(参考:Material Icons Guide)
目次の「Icon font for the web」をクリックします。

Setup Method 1. Using via Google FontsのlinkをコピーしてHTMLのheadに貼り付けます。
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
次にアイコンの素材を取得します。
Google検索に戻り「google icon」と検索します。

(参考:Google Fontsのアイコン集)
画面上部の検索窓で「menu」と検索します。
三本線のハンバーガーメニューが出てくるのでクリックします。

画面右側にInserting the iconの欄があり、コードが書いてあるのでコピーします。
これをHTMLに貼り付けます。
<header>
<h1>内田裕之のポートフォリオ</h1>
<!-- ハンバーガーメニューのアイコン -->
<div class="sp-menu">
<span class="material-icons id="open">menu</span>
</div>
<!-- PC版メニュー -->
<div class="pc-menu">
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">あいさつ</a></li>
<li><a href="#">問い合わせ</a></li>
</ul>
</nav>
</div>
</header>

class属性を"material-symbols-outlined"から"material-icons"に書き換えるのがポイントです。
最初から"material-icons"にしてよGoogleさんと思いますが、あしからず。
ハンバーガーメニューを開いた画面の項目
次にハンバーガーメニューを押して、メニュー画面を開いた状態をコーディングします。
要素の下に以下のコードを足します。
<!-- ハンバーガーメニューの内容 -->
<div class="overlay">
<span class="material-icons" id="close">close</span>
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="greeting.html">あいさつ</a></li>
<li><a href="https://forms.gle/2QTj2FHHoqkw2gF68">問い合わせ</a></li>
</ul>
</nav>
</div>

閉じるボタンはGoogle Fontsから取得しました。
メニューの内容はPCメニューと揃えています。
jsを使う設定
最後に</body>の前にjsを使うために以下のコードを書きます。
<script src="js/main.js"></script>
jsの内容は後半で書いていきます。
次はCSSで見た目を整えていきましょう。
CSSのコーディング
まずPCメニューからCSSで見た目を整えます。
header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1300px;
padding: 0 4%;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
color: #000;
padding: 0 24px;
line-height: 64px;
display: block;
}
nav a:hover {
opacity: 0.6;
}

サイトロゴとメニュー、ハンバーガーメニューを横並びにして見た目を整えました。
コードの解説はこちらの記事をご覧ください。
スマホ画面の調整
スマホ画面ではPCメニューは非表示にし、ハンバーガーメニューを表示するようにします。
非表示にはdisplay: none;を使います。
また、画面サイズの指定は@mediaを使います。
/* PC版メニュー */
.pc-menu {
display: none;
}
/* レスポンシブ対応 */
@media (min-width: 800px) {
.pc-menu {
display: flex;
list-style: none;
}
.pc-menu ul {
list-style-type: none;
}
.pc-menu li {
display: inline-block;
}
.pc-menu a {
text-decoration: none;
color: #000;
padding: 0 24px;
line-height: 64px;
display: block;
}
.pc-menu a:hover {
opacity: 0.6;
}
/* ハンバーガーメニュー */
.sp-menu {
display: none;
}
}

PC画面ではハンバーガーメニューが非表示になりました。

スマホ画面ではPCメニューが非表示になり、ハンバーガーメニューが表示されました。
次にハンバーガーメニューの見た目を整えます。
ハンバーガーメニューの装飾
ボタンが小さすぎるのと、三本線だけでは分かりにくいので囲い線をつけます。
.sp-menu #open {
font-size: 32px;
padding: 16px 16px;
border: solid silver 0.5px;
border-radius: 5px;
}

ハンバーガーメニューはfont-sizeで大きくしました。
paddingで余白を作り、borderで囲い線を作っています。
さらにborder-radiusで囲い線の角を丸めました。
ハンバーガーメニューを開いたら三本線のアイコンは非表示にしたいのでCSSを追加します。
.sp-menu #open.hide {
display: none;
}
#openに.hideが追加されたらdisplay: none;で非表示にする設定です。
詳細はjsのコーティングで解説します。
次にハンバーガーメニューを開いたときのメニュー画面を作りましょう。
ハンバーガーメニューを開いた画面の装飾
クラス属性overlayをCSSで整えます。
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(254, 180, 83, 0.95);
}

position: fixedでメニュー画面が前面に表示されるようにしています。
top、bottom、right、leftを0にすることで画面いっぱいに広げました。
背景は透明度のあるオレンジ色です。
ただ、メニューの項目がしょぼく見えるので見た目を整えます。
.overlay ul {
list-style-type: none;
text-align: center;
}
.overlay li {
margin-top: 24px;
}
.overlay a {
padding: 0 24px;
line-height: 64px;
text-decoration: none;
font-size: 1.2rem;
color: #000;
}
.overlay a:hover {
opacity: 0.6;
}

メニューの装飾をなくし、左右中央ぞろえで並べました。
文字サイズも大きくしました。
次にCloseボタンの位置と見た目を整えます。
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(254, 180, 83, 0.95);
padding: 64px;
}
.overlay #close {
position:absolute;
top: 16px;
right: 16px;
font-size: 32px;
cursor: pointer;
}

Closeボタンを右上に持っていき、大きくしました。
position: absolute;で絶対座標を変更できるようにして、top、rightで場所を指定します。
これでハンバーガーメニューを開いたときの画面ができました。
しかし、このままではメニュー画面が最前面に表示されたままになるので、さらにCSSを書き加えます。
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(254, 180, 83, 0.95);
padding: 64px;
opacity: 0;
pointer-events: none;
}
.overlay.show {
opacity: 1;
pointer-events: auto;
}

メニュー画面が消えましたね。
opacity: 0;でメニュー画面を透明にしました。
ただ、透明にしただけだとメニューの要素が動作してしまいます。
そこでpointer-events: none;によってクリックも選択もできないようにしました。
.overlay.showは、CSSクラス(.overlay)に.showが追加されたときに表示されるように設定するものです。
opacity: 1;により再表示するようにしています。
また、 pointer-events: auto;によりクリックや選択が再びできるようにしています。
これでCSSは完了です。
最後にjsでメニューの開閉をできるようにします。
jsのコーディング
ハンバーガーメニューを押すとメニュー画面が表示されるようにします。
const open = document.getElementById('open');
const overlay = document.querySelector('.overlay');
open.addEventListener('click', () => {
overlay.classList.add('show');
open.classList.add('hide');
});


constは定数を宣言します。
document.getElementById('open');でid=openの要素を指定します。
document.querySelector('.overlay');はclass=overlayの要素を指定します。
open.addEventListener('click', () => {動作内容});でid=openに特定のイベントがあったときに関数が呼び出されます。
特定のイベントとはクリックclickです。
動作内容は2つを指定しています。
1つはCSSクラスoverlayに.showを付け足すこと。
.overlay.showは再表示する設定にしているため、メニュー画面が出てきます。
もう1つは#openに.hideを付け足すこと。
CSSでdisplay: none;を設定しているので、ハンバーガーメニューは非表示になります。
これでハンバーガーメニューを押すとメニュー画面が表示される設定ができました。
メニュー画面を閉じる設定
Closeボタンを押したらメニュー画面を閉じるようにします。
const close = document.getElementById('close');
close.addEventListener('click', () => {
overlay.classList.remove('show');
open.classList.remove('hide');
});


メニュー画面が閉じるようになりました。
ここでは2つの設定をしています。
1つは.overlay.showから.showを取り除くこと。
.overlayはCSSで非表示にしています。
もう1つは#open.hideから.hideを取り除くこと。
#openはハンバーガーメニューを表示します。
これでメニュー画面が閉じるようになりました。
完成したコード
コピペで使えるようにHTML、CSS、jsのコードをまとめます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>内田裕之のポートフォリオ</h1>
<!-- ハンバーガーメニューのアイコン -->
<div class="sp-menu">
<span class="material-icons" id="open">menu</span>
</div>
<!-- PC版メニュー -->
<div class="pc-menu">
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">あいさつ</a></li>
<li><a href="#">問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<!-- ハンバーガーメニューの内容 -->
<div class="overlay">
<span class="material-icons" id="close">close</span>
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="greeting.html">あいさつ</a></li>
<li><a href="https://forms.gle/2QTj2FHHoqkw2gF68">問い合わせ</a></li>
</ul>
</nav>
</div>
<script src="js/main.js"></script>
</body>
</html>
@charset "UTF-8";
header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1300px;
padding: 0 4%;
}
/* ハンバーガーメニュー部分 */
.sp-menu #open {
font-size: 32px;
padding: 16px 16px;
border: solid silver 0.5px;
border-radius: 5px;
cursor: pointer;
}
.sp-menu #open.hide {
display: none;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(254, 180, 83, 0.95);
padding: 64px;
opacity: 0;
pointer-events: none;
}
.overlay.show {
opacity: 1;
pointer-events: auto;
}
.overlay #close {
position:absolute;
top: 16px;
right: 16px;
font-size: 32px;
cursor: pointer;
}
.overlay ul {
list-style-type: none;
text-align: center;
}
.overlay li {
margin-top: 24px;
}
.overlay a {
padding: 0 24px;
line-height: 64px;
text-decoration: none;
font-size: 1.2rem;
color: #000;
}
.overlay a:hover {
opacity: 0.6;
}
/* PC版メニュー */
.pc-menu {
display: none;
}
@media (min-width: 800px) {
.pc-menu {
display: flex;
list-style: none;
}
.pc-menu ul {
list-style-type: none;
}
.pc-menu li {
display: inline-block;
}
.pc-menu a {
text-decoration: none;
color: #000;
padding: 0 24px;
line-height: 64px;
display: block;
}
.pc-menu a:hover {
opacity: 0.6;
}
.sp-menu {
display: none;
}
}
'use strict';
{
const open = document.getElementById('open');
const overlay = document.querySelector('.overlay');
const close = document.getElementById('close');
open.addEventListener('click', () => {
overlay.classList.add('show');
open.classList.add('hide');
});
close.addEventListener('click', () => {
overlay.classList.remove('show');
open.classList.remove('hide');
});
}
まとめ
今回はハンバーガーメニューをHTML+CSS+jsで作る方法を紹介しました。
- HTMLでアイコンやメニュー項目を作る
- CSSで見た目を整える
- jsでクリックで表示画面を切り替える
今回の記事がレスポンシブ対応に役立つと嬉しいです。
サイトができあがったらGitHub Pagesを使って無料でネット上に公開しましょう。
この記事がよかったらTwitterやブログで紹介いただけると嬉しいです。