【完全保存版】HTML・CSSだけで作るスマホ用スライドメニューの作成方法｜初心者向け実装ガイド

スマホ用スライドメニューとは
実装前に考えるポイント
HTMLの基本構造
CSSでスライドメニューを作る
ハンバーガーボタンのデザイン
メニューを開閉する仕組み
背景のスクロールを防ぐ方法
横スクロールが発生する場合の対策
レスポンシブ対応の考え方
よくあるトラブルと注意点
まとめ

スマホ用スライドメニューとは

スマホ用スライドメニューとは、画面端からメニューがスライドして表示されるナビゲーションのことです。
ハンバーガーメニューとも呼ばれ、限られた画面スペースを有効活用できるため、多くのスマホサイトで採用されています。

主な特徴は以下の通りです。

初期表示ではメニューを非表示にできる
タップ操作で直感的に開閉できる
スマホ画面でもスッキリしたデザインを保てる

実装前に考えるポイント

スライドメニューを作成する前に、以下を意識しておくと失敗しにくくなります。

JavaScriptを使うか使わないか
右から出すか左から出すか
メニュー表示中の背景操作をどうするか
横スクロールが発生しないか

この記事では、初心者でも扱いやすい「HTML＋CSS中心」の方法を紹介します。

HTMLの基本構造

まずはスライドメニューの基本となるHTMLです。

<button class="menu-btn" aria-label="メニューを開く">
  <span></span>
  <span></span>
  <span></span>
</button>

<nav class="slide-menu">
  <ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/service">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

ポイントは以下です。

button要素を使い、操作性とアクセシビリティを確保
navタグでナビゲーションであることを明示
メニュー内はシンプルなリスト構造にする

CSSでスライドメニューを作る

次にCSSでメニューを画面外に配置し、スライド表示させます。

/* メニュー本体 */
.slide-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100vh;
  background-color: #ffffff;
  transition: right 0.3s ease;
  z-index: 1000;
}

/* 表示時 */
.slide-menu.is-open {
  right: 0;
}

/* メニューリスト */
.slide-menu ul {
  list-style: none;
  padding: 60px 20px;
  margin: 0;
}

.slide-menu li {
  margin-bottom: 20px;
}

.slide-menu a {
  text-decoration: none;
  color: #333;
  font-size: 1.6rem;
}

ここでは「right:-100% → right:0」の切り替えでスライドを実現しています。

ハンバーガーボタンのデザイン

次に、三本線のボタンをCSSで作ります。

.menu-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 30px;
  background: none;
  border: none;
  z-index: 1100;
}

.menu-btn span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #333;
  margin-bottom: 6px;
}

画像を使わず、CSSだけで表現することで管理が楽になります。

メニューを開閉する仕組み

JavaScriptを最小限だけ使い、クラスの付け外しで制御します。

<script>
const btn = document.querySelector('.menu-btn');
const menu = document.querySelector('.slide-menu');

btn.addEventListener('click', () => {
  menu.classList.toggle('is-open');
});
</script>

処理内容はとてもシンプルです。

ボタンを押す
is-open クラスを付け外し
CSSのtransitionでアニメーション

背景のスクロールを防ぐ方法

メニュー表示中に背景がスクロールすると、操作しづらくなります。

body.is-fixed {
  overflow: hidden;
}

<script>
btn.addEventListener('click', () => {
  menu.classList.toggle('is-open');
  document.body.classList.toggle('is-fixed');
});
</script>

これでメニュー表示中は背景が固定されます。

横スクロールが発生する場合の対策

スマホで横にスクロールしてしまう原因は、以下が多いです。

メニューを transform で外に出している
幅指定が100vwになっている
absolute要素が画面外にはみ出している

基本対策として、以下を設定します。

html,
body {
  overflow-x: hidden;
}

また、スライドメニューは right:-100% のように「位置指定」で隠す方が安全です。

レスポンシブ対応の考え方

スライドメニューはスマホ専用にし、PCでは通常メニューに切り替えるのが一般的です。

@media screen and (min-width: 768px) {
  .menu-btn {
    display: none;
  }

  .slide-menu {
    position: static;
    width: auto;
    height: auto;
    right: 0;
    transition: none;
  }
}

これにより、1つのHTMLでスマホ・PC両対応が可能になります。

よくあるトラブルと注意点

スライドメニュー実装時によくある問題です。

z-indexが足りずメニューが見えない
fixed要素が他の要素に隠れる
メニュー内リンクを押しても閉じない

これらは構造をシンプルにし、クラス管理を明確にすることで防げます。

まとめ

スマホ用スライドメニューは、構造を理解すれば難しくありません。

HTMLはシンプルに
CSSで位置とアニメーションを制御
JavaScriptは最小限にする
横スクロール対策を忘れない

この考え方は、HP Build Studioで制作している実案件のスマホサイトでも基本となっています。
ぜひご自身のサイトに合わせて調整しながら活用してみてください。