HTML/CSSだけで動くドロワーメニューの作り方【HTML/CSS・サンプルコード付き】

html/css/js
2025.09.29

HTML/CSSだけで動くドロワーメニューの作り方

HTMLとCSSだけで、JavaScriptを使わずに開閉できるドロワーメニューを作る方法を紹介します。このサンプルでは、チェックボックスのオン・オフを利用して、画面横からメニューを表示します。シンプルなサイドメニューや、JavaScriptなしで動くナビゲーションを作りたい場合に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

HTML＋CSSだけで作るドロワーメニュー

JavaScriptを使わず、HTMLとCSSだけでドロワーメニューを開閉できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>HTMLとCSSだけで作るドロワーメニュー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- CSSだけで開閉状態を管理するチェックボックス -->
  <input class="html-css-only-drawer-menu_checkbox" type="checkbox" id="html-css-only-drawer-menu_toggle">

  <!-- デモ全体を囲むエリア -->
  <div class="html-css-only-drawer-menu_wrap">

    <!-- 見出し -->
    <div class="html-css-only-drawer-menu_title">
      HTML＋CSSだけで作るドロワーメニュー
    </div>

    <!-- 説明文 -->
    <p class="html-css-only-drawer-menu_text">
      JavaScriptを使わず、HTMLとCSSだけでドロワーメニューを開閉できます。
    </p>

    <!-- ドロワーメニューを開くラベルボタン -->
    <label class="html-css-only-drawer-menu_open" for="html-css-only-drawer-menu_toggle">
      メニューを開く
    </label>

  </div>

  <!-- 背景クリックでメニューを閉じるエリア -->
  <label class="html-css-only-drawer-menu_overlay" for="html-css-only-drawer-menu_toggle"></label>

  <!-- ドロワーメニュー本体 -->
  <div class="html-css-only-drawer-menu_drawer" role="dialog" aria-modal="true">

    <!-- ドロワーメニューの見出し -->
    <div class="html-css-only-drawer-menu_drawer-title">
      メニュー
    </div>

    <!-- ドロワーメニューの説明文 -->
    <p class="html-css-only-drawer-menu_drawer-text">
      チェックボックスとCSSだけで開閉しています。
    </p>

    <!-- メニュー一覧 -->
    <nav class="html-css-only-drawer-menu_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">お知らせ</a>
      <a href="#">お問い合わせ</a>
    </nav>

    <!-- ドロワーメニューを閉じるラベルボタン -->
    <label class="html-css-only-drawer-menu_close" for="html-css-only-drawer-menu_toggle">
      閉じる
    </label>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSをそれぞれ別ファイルに分けて使用します。index.html、style.css を同じフォルダに配置してください。 

sample/
├── index.html
└── style.css

index.html をブラウザで開くと、JavaScriptを使わずにHTMLとCSSだけで開閉できるドロワーメニューを確認できます。

コメント