【初心者向け】HTMLとCSSのみで簡単に作るドロワーメニュー

※本ページはプロモーションが含まれています。

本記事は、「ページ作成してるけどスペースを有効活用したいなぁ…」と思いつつ

UIHACK 編集長

・HTMLとCSSを使用してシンプルなメニューを実装したい人
・メニューを「上から」「下から」と様々なバリエーションを知りたい人
・レスポンシブデザインに適したメニューを作成したい人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「シンプルなドロワーメニューの実装方法」を「後半」では「メニューを固定表示する方法」や「レスポンシブデザインに対応したメニューの実装」を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、少しずつ試してみて、楽しく学んでくださいね。

それでは、ご一読ください！

HTMLとCSSのみで作る、シンプルなドロワーメニューの実装方法
ドロワーメニューを、上から、下から表示させる方法を解説します。
1. 上から開くドロワーメニューの実装手順
2. 下から開くドロワーメニューの実装手順
レスポンシブデザインに対応したCSSドロワーメニューの実装方法を解説します。
1. メディアクエリを使用したメニューの表示/非表示の切り替え
結論とまとめ

HTMLとCSSのみで作る、シンプルなドロワーメニューの実装方法

ウェブサイトやアプリのナビゲーションをスムーズにするためには、シンプルなドロワーメニューが最適です。この章では、HTMLとCSSのみを使用して、シンプルで効果的なドロワーメニューを実装する方法を紹介します。

ドロワーメニューの基本的なHTMLとCSSタグ

UIHACK 編集長

基本のドロワーメニューの実行結果とHTML・CSSは以下のように実装しています。

【実行結果】ドロワーメニュー

プチ解説

このHTMLコードは、ドロワーメニューのコンテナを構築しています。menu-container内には、トグルボタンとメニューのナビゲーションが含まれています。

HTML

<div class="menu-container">
  <input type="checkbox" id="menu-toggle">
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <label for="menu-toggle" class="menu-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
</div>

HTML

プチ解説

<input>タグは、メニューのトグル（開閉）を行うためのチェックボックスです。id 属性が “menu-toggle” という名前になっています。

CSS

/* 全体のスタイル */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* メニューコンテナ全体のスタイル */
.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* メニューボタンのスタイル */
.menu-button {
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  cursor: pointer;
  z-index: 2;
}

/* メニューバーのスタイル */
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
  transition: 0.4s;
}

/* メニューボタンがチェックされた場合の1つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
  transform: rotate(45deg) translate(-2px, 3px);
}

/* メニューボタンがチェックされた場合の2つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
  opacity: 0;
}

/* メニューボタンがチェックされた場合の3つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -13px);
}

/* メニュートグルのスタイル */
#menu-toggle {
  display: none;
}

/* メニューのスタイル */
.menu {
  position: fixed;
  top: 0;
  left: -100%; /* 変更: メニューを左からスライドインさせるために left に設定 */
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  transition: 0.4s;
  z-index: 1;
  overflow-y: auto;
}

/* メニュートグルがチェックされた場合のメニューの表示アニメーション */
#menu-toggle:checked ~ .menu {
  left: 0; /* メニューを表示させるために left を 0 に変更 */
}

/* メニュー内のリストのスタイル */
.menu ul {
  list-style: none;
  padding: 20px;
}

/* メニュー内リストのリンクのスタイル */
.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  display: block;
  padding: 10px 0;
  transition: 0.2s;
}

/* メニュー内リストのリンクのホバー時のスタイル */
.menu ul li a:hover {
  color: #bf7497;
}

CSS

プチ解説

このCSSコードは、メニューコンテナ、メニューナビゲーション、メニュートグルボタン、およびメニューバーのスタイルを定義しています。

ハンバーガーメニューのアイコン要素の作成

UIHACK 編集長

この章では、ハンバーガーメニューのアイコン要素を作成するための手法について詳しく解説します。

そもそも、ハンバーガーアイコンのデザインは、以下の部分で行われています。

ハンバーガーアイコンのデザインのここでしている

/* メニュートグルボタンのスタイル */
.menu-button {
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  cursor: pointer;
  z-index: 2;
}

/* メニューバーのスタイル */
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
  transition: 0.4s;
}

CSS

プチ解説

このセレクタ .bar は、ハンバーガーアイコンを構成するバー（水平線）のスタイルを指定しています。具体的には、メニューの高さ、幅、margin、背景の色などがこの部分で設定されています。

ハンバーガーアイコンは3本の水平バーから成り立っており、それぞれ .bar クラスでスタイルが指定されています。このスタイルによって、ハンバーガーアイコンが特有のデザインとなっています。.barクラスのCSSを調整することで、アイコンの見た目をカスタマイズすることができます。

メニューの表示/非表示状態の管理

UIHACK 編集長

この部分のCSSコードは、チェックボックスがチェックされた状態でハンバーガーアイコンのバーのアニメーションを制御しています。以下にそれぞれの行の意味を説明します。

HTMLのチェックボックス要素の非表示

/* メニュートグルがチェックされた場合のメニューの表示アニメーション */
#menu-toggle:checked ~ .menu {
  left: 0; /* メニューを表示させるために left を 0 に変更 */
}

CSS

プチ解説

#menu-toggle:checked ~ .menu はHTMLのチェックボックス要素です。このセレクタは、チェックボックス自体を画面上に表示しないようにします。このチェックボックスはメニューの開閉状態を制御するためのものです。

メニューバーのアニメーション：バー1（開くアニメーション）

#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
  transform: rotate(45deg) translate(-2px, 3px);
}

CSS

プチ解説

・チェックボックスがチェックされている（ハンバーガーアイコンがクリックされた）場合に、最初のバーを回転させてクローズアイコンのような形状に変化させます。transform プロパティを使用して回転と移動を行います。

メニューバーのアニメーション：バー2（非表示アニメーション）

#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
  opacity: 0;
}

CSS

プチ解説

チェックボックスがチェックされている場合、2番目のバーを透明にすることで非表示にします。これにより、ハンバーガーアイコンが開いたときに中央のバーが消えるアニメーションが実現されます。

メニューバーのアニメーション：バー3（開くアニメーション）

#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -13px);
}

CSS

プチ解説

メニュートグルがチェックされたとき、3番目のバーを回転して斜めに表示させます。

目次に戻る

ドロワーメニューを、上から、下から表示させる方法を解説します。

Webサイトの使い心地を向上させるために、ハンバーガーアイコンをクリックすると表示されるドロワーメニューは非常に使用しやすいです。このデザインパターンを応用して、メニューを上からもしくは下からスムーズに表示させる方法を解説します。

上から開くドロワーメニューの実装手順

UIHACK 編集長

上から表示させるドロワーメニューは、クリックした際に画面上部からメニューが滑らかにアニメーションで表示させます。以下の手順で実現できます。

【実行結果】上から表示させるドロワーメニュー

プチ解説

ハンバーガーアイコンをクリックするとメニューの表示・非表示時のアニメーションを制御しています。
今回は上からメニューが降りてくるように実装しています。

①HTML

<div class="menu-container">
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="menu-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

HTML

プチ解説

input type=”checkbox” id=”menu-toggle”: メニューの開閉を制御するためのチェックボックスです。id属性は後述のラベルのfor属性と対応しています。

label for=”menu-toggle” class=”menu-button”: メニューのトグル（開閉）を行うためのラベルです。このラベルはチェックボックスと連動しています。

<nav class=”menu”>: メニューコンテンツ全体を表すnav要素です。メニュー項目がリストで表示されます。

②CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.menu-button {
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  cursor: pointer;
  z-index: 2;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
  transition: 0.4s;
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
  transform: rotate(45deg) translate(-2px, 3px);
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
  opacity: 0;
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -13px);
}

#menu-toggle {
  display: none;
}

.menu {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  transition: 0.4s;
  z-index: 1;
  overflow-y: auto;
}

#menu-toggle:checked ~ .menu {
  top: 0;
}

.menu ul {
  list-style: none;
  padding: 20px;
}

.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  display: block;
  padding: 10px 0;
  transition: 0.2s;
}

.menu ul li a:hover {
  color: #bf7497;
}

CSS

プチ解説

.menu-container: メニューコンテナ全体のスタイルを指定しています。position: fixed;によりコンテナを固定位置に配置し、width: 100%; height: 100%;で画面全体を覆うように設定しています。

#menu-toggle:checked ~ .menu-button .bar:nth-child(1): チェックボックスがチェックされている場合、ハンバーガーボタンの1番目のバーにスタイルを適用します。transformでバーの回転と移動を行い、クリック時に閉じるアイコンになるよう変更しています。

#menu-toggle:checked ~ .menu-button .bar:nth-child(2): チェックボックスがチェックされている場合、ハンバーガーボタンの2番目のバーに対してスタイルを適用し、透明にして非表示にしています。

下から開くドロワーメニューの実装手順

UIHACK 編集長

下から表示させるドロワーメニューは、クリックした際に画面下部からメニューが滑らかに現れるアプローチです。以下の手順で実現できます。

【実行結果】下から開くドロワーメニュー

プチ解説

下から表示させるドロワーメニューは、クリックした際に画面下部からメニューが滑らかにアニメーションで表示させます。以下の手順で実現できます。

HTML

<div class="menu-container">
  <input type="checkbox" id="menu-toggle">
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <label for="menu-toggle" class="menu-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
</div>

HTML

プチ解説

先ほどの「上から開くドロワーメニューの実装手順」で解説しましたので今回は省きます。

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.menu-container {
  position: fixed;
  bottom: 0; /* 変更: top から bottom に変更 */
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.menu-button {
  display: block;
  position: fixed;
  bottom: 20px; /* 変更: top から bottom に変更 */
  left: 20px;
  cursor: pointer;
  z-index: 2;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
  transition: 0.4s;
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
  transform: rotate(45deg) translate(-2px, 3px);
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
  opacity: 0;
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -13px);
}

#menu-toggle {
  display: none;
}

.menu {
  position: fixed;
  bottom: -100%; /* 変更: top から bottom に変更 */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  transition: 0.4s;
  z-index: 1;
  overflow-y: auto;
}

#menu-toggle:checked ~ .menu {
  bottom: 0; /* 変更: top から bottom に変更 */
}

.menu ul {
  list-style: none;
  padding: 20px;
}

.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  display: block;
  padding: 10px 0;
  transition: 0.2s;
}

.menu ul li a:hover {
  color: #bf7497;
}

CSS

プチ解説

上から表示されるドロワーメニューのコードと比較して、

.menu のtop の値をbottom に変更され、メニューコンテナとボタンの位置が下部に調整されています。

#menu-toggle:checked ~ .menu:をtop から bottom に変更しています。

レスポンシブデザインに対応したCSSドロワーメニューの実装方法を解説します。

UIHACK 編集長

レスポンシブデザインは、小さな画面サイズ（モバイルやタブレットなど）でメニューのデザインを切り分けて表示し、ユーザーが必要なときに表示できるようにするデザインパターンです。以下の手順に従って、HTMLとCSSを使用してレスポンシブなドロワーメニューを実装できます。

【実行結果】レスポンシブデザインに対応したCSSドロワーメニュー

プチ解説

メディアクエリを使用して以下のように実装しています。

600px以上の画面幅では、「Home」〜「Contact」が横並びに表示しています。

600px以下の画面幅では、最初の章で解説した左隅にハンバーガーアイコンが出現します。

HTML

<div class="menu-container">
  <input type="checkbox" id="menu-toggle">
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <label for="menu-toggle" class="menu-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
</div>

HTML

プチ解説

レスポンシブなドロワーメニューを実装するためのものです。

CSS

/* 全体のスタイル */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* メニューコンテナ全体のスタイル */
.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* メニューボタンのスタイル */
.menu-button {
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  cursor: pointer;
  z-index: 2;
}

/* メニューバーのスタイル */
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
  transition: 0.4s;
}

/* メニューボタンがチェックされた場合の1つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
  transform: rotate(45deg) translate(-2px, 3px);
}

/* メニューボタンがチェックされた場合の2つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
  opacity: 0;
}

/* メニューボタンがチェックされた場合の3つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -13px);
}

/* メニュートグルのスタイル */
#menu-toggle {
  display: none;
}

/* メニューのスタイル */
.menu {
  position: fixed;
  top: 0;
  left: -100%; /* 変更: メニューを左からスライドインさせるために left に設定 */
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  transition: 0.4s;
  z-index: 1;
  overflow-y: auto;
}

/* メニュートグルがチェックされた場合のメニューの表示アニメーション */
#menu-toggle:checked ~ .menu {
  left: 0; /* メニューを表示させるために left を 0 に変更 */
}

/* メニュー内のリストのスタイル */
.menu ul {
  list-style: none;
  padding: 20px;
}

/* メニュー内リストのリンクのスタイル */
.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  display: block;
  padding: 10px 0;
  transition: 0.2s;
}

/* メニュー内リストのリンクのホバー時のスタイル */
.menu ul li a:hover {
  color: #bf7497;
}

/******************************
600px以上の画面幅で表示されるスタイル 
*******************************/
@media screen and (min-width: 601px) {
  /* メニューのスタイル */
  .menu ul {
    display: flex; /* メニュー項目を横並びにする */
    justify-content: center; /* メニュー項目を中央寄せにする */
    padding: 0; /* デフォルトのパディングをリセット */
  }

  /* メニュー内リストのスタイル */
  .menu ul li {
    margin: 0 15px; /* メニュー項目の間隔を調整 */
  }

  /* メニューボタンの位置を調整 */
  .menu-button {
    display: none; /* メニューボタンを非表示にする */
  }

  /* メニューの幅と位置を調整 */
  .menu {
    display: flex;
    position: static;
    background-color: #f8f8f8;
    box-shadow: none;
    z-index: auto;
    flex-direction: row;
    justify-content: flex-start;
    height: auto;
  }
}

/******************************
600px以下の画面幅で表示されるスタイル
*******************************/
@media screen and (max-width: 600px) {
  /* メニューボタンの位置を調整 */
  .menu-button {
    top: 15px;
    left: 15px;
  }

  /* メニューの幅と位置を調整 */
  .menu {
    width: 80%; /* 画面幅の80%の幅に調整 */
    left: -80%; /* メニューを左からスライドインさせるために left を設定 */
  }

  /* メニュートグルがチェックされた場合のメニューの表示アニメーション */
  #menu-toggle:checked ~ .menu {
    left: 0; /* メニューを表示させるために left を 0 に変更 */
  }
}

CSS

プチ解説

@media screen and (min-width: 601px): 画面幅が601px以上の場合のスタイルを指定するメディアクエリです。デスクトップ向けのスタイルが含まれています。

@media screen and (max-width: 600px): 画面幅が600px以下の場合のスタイルを指定するメディアクエリです。モバイル向けのスタイルが含まれています。

メディアクエリを使用したメニューの表示/非表示の切り替え

UIHACK 編集長

メディアクエリ(@media)を使用したメニューの表示/非表示の切り替えは、レスポンシブデザインにおいて画面サイズに応じて適切なCSSを実装する基本です。

簡単に言うと、画面の大きさが違うときに、ウェブページのデザインを自動的に変えることができるって事。

画面幅が601px以上

/******************************
600px以上の画面幅で表示されるスタイル 
*******************************/
@media screen and (min-width: 601px) {
  /* メニューのスタイル */
  .menu ul {
    display: flex; /* メニュー項目を横並びにする */
    justify-content: center; /* メニュー項目を中央寄せにする */
    padding: 0; /* デフォルトのパディングをリセット */
  }

  /* メニュー内リストのスタイル */
  .menu ul li {
    margin: 0 15px; /* メニュー項目の間隔を調整 */
  }

  /* メニューボタンの位置を調整 */
  .menu-button {
    display: none; /* メニューボタンを非表示にする */
  }

  /* メニューの幅と位置を調整 */
  .menu {
    display: flex;
    position: static;
    background-color: #f8f8f8;
    box-shadow: none;
    z-index: auto;
    flex-direction: row;
    justify-content: flex-start;
    height: auto;
  }
}

CSS

プチ解説

@media screen and (min-width: 601px): 画面幅が601px以上の場合のCSSが指定されています。これはデスクトップ向けにコーディングしています。上記の内容では、メニューボタンが非表示にされ、メニュー項目が横並びに配置されるように調整されています。

画面幅が600px以下の場合

/******************************
600px以下の画面幅で表示されるスタイル
*******************************/
@media screen and (max-width: 600px) {
  /* メニューボタンの位置を調整 */
  .menu-button {
    top: 15px;
    left: 15px;
  }

  /* メニューの幅と位置を調整 */
  .menu {
    width: 80%; /* 画面幅の80%の幅に調整 */
    left: -80%; /* メニューを左からスライドインさせるために left を設定 */
  }

  /* メニュートグルがチェックされた場合のメニューの表示アニメーション */
  #menu-toggle:checked ~ .menu {
    left: 0; /* メニューを表示させるために left を 0 に変更 */
  }
}

CSS

プチ解説

@media screen and (max-width: 600px): 画面幅が601px以上の場合のCSSが指定されています。これはモバイル向けにコーディングしています。上記の内容では、ハンバーガーアイコンが表示され、メニューがスライドインして表示されるように調整されています。

あなたにオススメの本

【4年連続、売上第1位！】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

読者の圧倒的な支持！シリーズ35万部突破の大ヒット!

¥2,486 （2023/08/01 15:07時点 | Amazon調べ）

ポチップ

FAQ
よくあるご質問

QDrawerメニューとは何ですか？そのメリットとは

A Drawerメニューは、ウェブサイトやアプリのナビゲーションメニューを「非表示状態」で画面の端に隠し、ユーザーが必要な時にスライドアウトさせる仕組みです。

Qハンバーガーメニューとドロワーメニューの違いと使い分け方

A ハンバーガーメニューは、一般的に3本の水平線で表現されるアイコンです。

A ドロワーメニューは、画面の端に隠されたメニューで、必要な時にスライドアウトさせます。

QCSSでメニューを固定表示する方法と注意点

A メニューを固定表示するためには、以下のステップを実行します。

位置の指定: position: fixed;
を使用してメニューの位置を固定します。これにより、スクロールしてもメニューが画面上部に留まるようになります。
上部マージンの設定
固定メニューがコンテンツと重ならないように、適切な上部マージンを設定します。これにより、メニューが画面上部に固定されつつも、コンテンツが適切に表示されます。
z-indexの設定: z-index
プロパティを使用して、メニューが他の要素と重ならないようにします。これにより、メニューが他のコンテンツの上に表示されるようになります。