しずくのIT日記

アイコン

スマホで表示するメニューアイコン（ハンバーガーメニュー）をPNG画像で作成する方法

【公開日：　2026年6月30日】

雑談：　備忘録

～メニューボタンとバツボタンを切り替えますよ～

またまた当webページを製作中の話。当初はレスポンシブデザイン時に、スマホ画面右上にメニューボタンを付けようと考えていました。
が、メニューボタンをつけるほどのバリエーションがありませんでしたので（爆発）、あえなく廃止にしました。
せっかくいろいろ設定したので、備忘録として取っておくことにした次第です。

メニューボタンは、スマホ画面の上部（ヘッダー部分）にある3本線のアイコンがよくあるやつです。タップするとバツに変化するスタイリッシュなアイコンが多いかと思います。タップ時にリストがどこからともなく現れます。
こちらは「ハンバーガーメニュー」と呼ぶそうです。

ハンバーガーの画像 バツの画像

↑は私が用意したアイコンになります。ハンバーガーと聞いて、早速描きました。スタイリッシュとは程遠い出来です。
バツボタンなんて1分で描いた手抜きです。（ちなみに上のアイコンはダウンロードできます！）
私が作成したコードのイメージは以下の通りです。
①「menu」アイコンをタップ時、「close」アイコンに切り替えてリストを表示する
②再度「close」アイコンをタップ時、「menu」アイコンに切り替えてリストを非表示にする

必要なコードはHTML、CSS、Javascriptです。まずはHTMLから。headタグにスタイルシートとJavascriptの在処を記載し、メニューボタン自体はbodyタグ内、かつheaderタグに記載していきます。
↓はVS Code画面になります。当記事に必要な所だけ抜粋しています。URLやリスト内容は仮で入力しています。

メニューHTMLの画像

画像内の入力コードを添付します。ご参考に！

HTMLコードはこちらに（クリックで開閉） 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>しずくのIT日記</title>
  <meta name="description" content="ここにページ概要を記載">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./js/toggle-menu.js"></script>
  <link href="./css/common.css" rel="stylesheet">
</head>

<body>
  <header class="header">
    <div class="header-inner">
      <a class="header-logo" href="./index.html">
        <img src="./images/sizuq-logo.png" alt="logo">
      </a>
      <button class="toggle-menu-button"></button>
      <div class="header-site-menu">
        <nav class="site-menu">
          <ul>
            <li><a href="./urloo.html">Menu1</a></li>
            <li><a href="./urloo.html">Menu2</a></li>
            <li><a href="./urloo.html">Menu3</a></li>
            <li><a href="./urloo.html">Menu4</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</body>
</html>

JavascriptとCSSのファイル名もご参考まで。コードは後ほど記載いたします。
ヘッダーにロゴ、ハンバーガーメニューボタン、リストを設置します。この時点では全て画面に表示されてます。
CSSで非表示にしたりとデザインしていきます。

CSSはPC表示の方も用意しますので、まずはそちらから取り掛かります。※ハンバーガーメニューに関わる部分のみこちらに記載。ハンバーガーメニュー自体にはあまり触れないので飛ばしてもOKです
PC表示時は「リストは横並び表示、かつハンバーガーメニューは使用しない想定なので非表示」で設定します。

cssファイルの画像
PC表示用のCSSコードはこちらに（クリックで開閉） 
.header-inner {
  max-width: 1200px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-menu-button {
  display: none;
}

.header-logo {
  display: block;
  width: 100px;
}

.site-menu ul {
  display: flex;
}

.site-menu ul li {
  margin-left: 20px;
  margin-right: 20px;
}

「ロゴ」「ハンバーガーメニュー」「リスト」をflexで横並びにして、「justify-content: space-between;」で画面に均等に配置します。この時点ではリストは大枠の方がflexになっていてリスト内容は縦になっていますので、ulにもflexを設定します。
ハンバーガーメニューはPC上では不要なので、「display: none;」で非表示にします。スマホ表示ではアイコンが復活するように記載しないといけません。

PC表示時の画像

PC画面はこんな感じです。

次はスマホ画面のCSS（レスポンシブデザイン）です。
PC表示時にハンバーガーを非表示にしたので再表示にし、リストはクリック時にパッと現れるように変更します。まずはリストの表示を整えていきます。

cssファイルの画像
スマホ表示用のCSSコード【リスト設定】はこちらに（クリックで開閉） 
@media (max-width: 800px) {
  .site-menu ul {
    display: block;
    text-align: center;
  }

  .site-menu li {
    margin-top: 20px;
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #a2cdf9;
    height: 50px;
    z-index: 10;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }

  .header-inner {
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    position: relative;
  }

  .header-logo {
    width: 50px;
  }

  .header-site-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    color: #ffffff;
    background-color: #736E62;
    padding-top: 30px;
    padding-bottom: 50px;
    display: none;
  }}

ヘッダー全体を整えつつ、リスト表示も設定していきます。PCではflexにしていたので、blockに変更します。これで立て並びに戻ります。
positionプロパティを設定します。ヘッダー全体にはfixed（固定。これで画面がスクロールしても常に表示されます）、なかの3つの要素にはrelative（通常の位置に表示）、リスト内容にはabsolute（relativeを基準位置として場所を指定）を設定します。
リスト内容を「display: none;」で非表示にすればいったん完了です。

続いて、ハンバーガーメニューのCSSを書いていきます。
ボタンクリック時の動きですが、今回は「クリック時にclass名を付与させる」という動きにして、そのclass名でCSSを指定する事で切り替えができるようにしました。class名の付与はJavascriptで書き、class名によって表示を変えるのはCSSで書きます。

cssファイルの画像
スマホ表示用のCSSコード【ハンバーガー設定】はこちらに（クリックで開閉） 
.toggle-menu-button {
    display: block;
    width: 44px;
    height: 34px;
    background-image: url(../images/menu-icon.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: 0;
  }

  .header-site-menu.is-show {
    display: block;
  }

  .toggle-menu-button.is-open {
    background-image: url(../images/close-menu.png);
  }

まず、ハンバーガーボタンそのものの設定です。blockで表示が復活します。ハンバーガーの絵はbackground-imageにして表示させますが、このままだとハンバーガーの絵がいくつか出てきますので、backgroundの各種要素で良い感じの位置に設定します。
ハンバーガーをクリック時にリストを表示させるため、ここでのclass名は「is-show」と「is-open」にすることにしました。ぽちっと押したときにこの2つのclass名が付与され、それぞれが動き出すイメージです。「display: block;」で非表示にしていたリスト内容が表示され、ハンバーガーがバツボタンに変化します。

いよいよ最後、Javascriptを書いていきます。
上記の通り、class名をクリック時に付与させるようにします。また、バツボタン表示の時にクリックした時は、「class名を排除する」という動きにさせれば元に戻るようにできます。

javascriptファイルの画像
ハンバーガーメニューJavascriptコードはこちらに（クリックで開閉） 
window.addEventListener('load', function () {
    let $button = document.querySelector('.toggle-menu-button');
    let $menu = document.querySelector('.header-site-menu');
    $button.addEventListener('click', function () {
        if ($menu.classList.contains('is-show')) {
            $menu.classList.remove('is-show');
            $button.classList.toggle('is-open');
        }
        else {
            $menu.classList.add('is-show');
            $button.classList.add('is-open');
        }
    });
});

画面表示時にロードし、ハンバーガーボタンとリスト内容に変数を設定。
ハンバーガーボタンクリック時の関数は画像4行目からです。クリック時に「is-show」名が付与されているかをチェック（contains）し、付いていたら外します（remove）。「is-open」の方はclasslist.toggleを使って、要素に「is-open」が付いていたら外し、無ければ付与するという指定です。if文うしろのelseにてadd（追加）を指定し、「もしis-showクラス名が付いていなかったらこの2つのクラスを付けます」という動きにします。

こうすることで、ハンバーガー表示の時はis-show、is-openは付いておらず、バツボタン表示の時はis-show、is-openが付いている、という変化をつけることができます。

ハンバーガーメニュー表示時

PC表示時の画像

バツボタン表示/リスト表示時

PC表示時の画像

画面はこんな感じです。

まとめ

メニューボタンを画像切り替えで作成する方法に、Javascriptを利用する手順を記載しました。
ちなみに、ぽちっと押したらバツマークに切り替わるボタン自体は、HTMLとCSSだけでも実装可能です。バツ画像を見えないところに隠しておいて、押下時に所定の位置に一瞬で移動させる方法です。
もう少しスタイリッシュな動きを取り入れたら、もっと見栄えの良いwebページにできると思います。コンセプトに合わせていろいろ加筆修正して、センスを磨きたいところです。

プロフィール添付アイコン

この記事記事を書いた人：
しずく
初心者向け記事の担当者です！