半透明のドロワーメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー
2026.07.18

半透明のドロワーメニューを作る方法

HTML・CSS・JavaScriptを使って、背景が透けて見える半透明のドロワーメニューを作る方法を紹介します。このサンプルでは、「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、半透明の背景を通して後ろの画面が見えるデザインにしています。通常の白背景や単色背景とは異なり、ページの内容を完全に隠さずにメニューを重ねて表示したい場合に利用できます。

ドロワーメニュー本体には半透明のrgba()による背景色を設定し、backdrop-filterのblur()を組み合わせて、後ろにある内容をぼかしながら透かして表示します。メニュー内には「ホーム」「サービス」「お知らせ」「お問い合わせ」のリンクを縦方向に配置し、それぞれのリンクにも半透明の背景を設定しています。

JavaScriptではis-activeクラスを付け外ししてドロワーメニューを開閉します。「閉じる」ボタンだけでなく、ドロワーメニュー外側の背景部分をクリックして閉じることもできます。CSSでは透明度やぼかしの強さ、ドロワーの横幅、スライド速度などを変更でき、画面幅640px以下ではドロワーメニューを画面幅いっぱいに表示します。

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

デモ

半透明のドロワーメニュー

ボタンをクリックすると、背景が透けて見えるドロワーメニューが表示されます。

「メニューを開く」をクリックすると、背景が透けて見える半透明のドロワーメニューが左側から表示されます。「閉じる」ボタンまたは背景部分をクリックすると閉じます。

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

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

<head>

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

  <!-- スマートフォンで適切な表示サイズにする -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>半透明のドロワーメニュー</title>

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

</head>

<body>

  <!-- 案内エリア -->
  <main class="transparent-drawer-menu_wrap">

    <!-- タイトル -->
    <div class="transparent-drawer-menu_title">
      半透明のドロワーメニュー
    </div>

    <!-- 説明文 -->
    <p class="transparent-drawer-menu_text">
      ボタンをクリックすると、背景が透けて見えるドロワーメニューが表示されます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button class="transparent-drawer-menu_open" type="button">
      メニューを開く
    </button>

  </main>

  <!-- ドロワーメニュー表示時の背景 -->
  <div class="transparent-drawer-menu_overlay"></div>

  <!-- 半透明のドロワーメニュー -->
  <div
    class="transparent-drawer-menu_drawer"
    role="dialog"
    aria-modal="true">

    <!-- ドロワーメニューのタイトル -->
    <div class="transparent-drawer-menu_drawer-title">
      メニュー
    </div>

    <!-- ドロワーメニューの説明文 -->
    <p class="transparent-drawer-menu_drawer-text">
      背景をぼかしながら透かして表示するドロワーメニューです。
    </p>

    <!-- メニューリンク -->
    <nav class="transparent-drawer-menu_nav">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">お知らせ</a>
      <a href="#">お問い合わせ</a>
    </nav>

    <!-- ドロワーメニューを閉じるボタン -->
    <button class="transparent-drawer-menu_close" type="button">
      閉じる
    </button>

  </div>

  <!-- JavaScriptファイルを読み込む -->
  <script src="script.js"></script>

</body>

</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニューの内容を配置し、CSSの半透明背景とbackdrop-filterを使って背景が透けて見えるデザインを作ります。JavaScriptではis-activeクラスを付け外しして、ドロワーメニューと背景の表示を切り替えます。 

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

各ファイルの役割
index.htmlは半透明のドロワーメニューの構造を作るファイルです。「メニューを開く」ボタン、ドロワー内のタイトルと説明文、「ホーム」「サービス」「お知らせ」「お問い合わせ」のリンク、「閉じる」ボタンを配置しています。

style.cssはドロワーメニューのデザインを設定するファイルです。rgba(255,255,255,.2)でドロワー本体を半透明にし、backdrop-filter:blur(12px);で後ろにある内容をぼかします。ドロワーの横幅、余白、半透明リンク、背景オーバーレイ、スライド表示などもCSSで設定しています。

script.jsはドロワーメニューを開閉するファイルです。「メニューを開く」をクリックするとドロワーと背景へis-activeクラスを追加します。「閉じる」ボタンまたはドロワー外側の背景をクリックするとis-activeクラスを削除して閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。追加のJavaScriptライブラリは必要ありません。

「メニューを開く」をクリックすると画面左側から半透明のドロワーメニューが表示されます。「閉じる」ボタンまたは半透明の背景部分をクリックするとメニューを閉じます。

カスタマイズできる内容
index.htmlではドロワーメニューのタイトル、説明文、リンク名、リンク数、リンク先を変更できます。実際に使用する場合は各href="#"を移動先のURLへ変更してください。

style.cssではドロワーメニューの透明度、背景のぼかし、横幅、余白、リンクの透明度、背景オーバーレイの濃さ、スライド速度などを変更できます。

数値調整
style.css
max-width:700px;
案内エリアの最大横幅です。値を大きくすると横に広がります。

padding:32px;
案内エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。

width:360px;
ドロワーメニューの横幅です。値を大きくするとドロワーが横に広がります。

max-width:90%;
ドロワーメニューの最大横幅です。画面幅に対してドロワーが占める割合を調整できます。

padding:28px;
ドロワーメニュー本体の内側余白です。値を大きくすると内容周囲の余白が広がります。

background:rgba(255,255,255,.2);
ドロワーメニュー本体の半透明背景です。最後の.2を大きくすると白色が濃くなり、小さくすると透明度が高くなります。

backdrop-filter:blur(12px);
ドロワーメニューの後ろにある内容のぼかし量です。12pxを大きくするとぼかしが強くなり、小さくすると弱くなります。

background:rgba(15,23,42,.45);
ドロワー外側に表示する背景の色と透明度です。最後の.45を大きくすると濃くなり、小さくすると薄くなります。

transform:translateX(calc(-100% - 40px));
閉じた状態でドロワーメニューを画面左側へ移動する値です。40px分追加で移動させることで、閉じた状態のドロワーが画面左端へ残りにくくなります。

transition:transform .35s ease;
ドロワーメニューがスライドする時間です。.35sを大きくするとゆっくり動き、小さくすると速く動きます。

gap:12px;
メニューリンク同士の間隔です。値を大きくするとリンク同士が離れます。

background:rgba(255,255,255,.18);
各メニューリンクの半透明背景です。最後の.18を変更するとリンク部分の透明度を調整できます。

border-radius:10px;
メニューリンクの角丸です。値を大きくすると丸みが強くなります。

レスポンシブ対応
通常時のドロワーメニューはwidth:360px;とmax-width:90%;で表示します。画面幅640px以下ではwidth:100%;とmax-width:100%へ変更し、画面幅いっぱいに表示します。

画面幅640px以下では案内エリアをpadding:24px 18px;、ドロワーメニューをpadding:24px 20px;へ変更し、小さい画面でも内容を確認しやすい余白に調整しています。

この記事の動作・特徴

デコレーション

色・枠線・影・形などの装飾を加えて、見た目やデザインを変更したサンプルコードをまとめています。

その他のコードを探す

こちらもおすすめ

ドロワーメニュー
ドロワーメニューのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント