ドロワーメニュー表示中にページ背景をぼかす方法【HTML/CSS/JavaScript・サンプルコード付き】

ドロワーメニュー表示中にページ背景をぼかす方法

ドロワーメニュー表示中にページ背景をぼかす方法を紹介します。このサンプルでは、「メニューを開く」をクリックすると画面左側からドロワーメニューが表示され、同時にメニューの背後にあるページ全体へぼかし効果を加えます。ドロワーメニューを前面へ表示するだけでなく、背後のコンテンツを見えにくくすることで、開いているメニューへ視線を集めやすいデザインにできます。

スマートフォン向けのナビゲーション、会員サイトのメニュー、管理画面のナビゲーション、サービスサイトのメニューなど、ドロワーメニューを開いている間に背景との視覚的な差を付けたい場面で利用できます。背景には半透明の色を重ねたうえでCSSのbackdrop-filterを使用し、ドロワーメニューの背後にあるページ内容へぼかし効果を加えています。

HTMLではメニュー項目やリンク先を変更でき、CSSでは背景のぼかし量、半透明背景の濃さ、ドロワーメニューの横幅、余白、スライド速度などを調整できます。JavaScriptではis-activeクラスの追加と削除によってドロワーメニューと背景の表示状態を切り替えます。閉じるボタン、背景部分、メニュー項目のいずれかをクリックするとドロワーメニューが閉じる構成で、画面幅640px以下では余白を調整しています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

背景をぼかすドロワーメニュー

「メニューを開く」をクリックすると、ページ背景をぼかしてドロワーメニューを表示します。

「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示され、ページ背景にぼかし効果が加わります。「閉じる」をクリックするとドロワーメニューとぼかし効果が解除されます。半透明の背景をクリックしてもドロワーメニューは閉じません。

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

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

  <!-- 文字コード -->
  <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="blur-background-drawer-menu_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="blur-background-drawer-menu_title">
      背景をぼかすドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="blur-background-drawer-menu_text">
      「メニューを開く」をクリックすると、ページ背景をぼかしてドロワーメニューを表示します。
    </p>

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

  </main>

  <!-- ドロワーメニュー表示中の半透明背景 -->
  <div
    class="blur-background-drawer-menu_overlay"
    data-blur-background-drawer-menu-overlay="">
  </div>

  <!-- ドロワーメニュー本体 -->
  <div
    class="blur-background-drawer-menu_drawer"
    data-blur-background-drawer-menu-drawer=""
    role="dialog"
    aria-modal="true"
    aria-labelledby="blur-background-drawer-menu-heading">

    <!-- ドロワーメニューの見出し -->
    <div
      class="blur-background-drawer-menu_heading"
      id="blur-background-drawer-menu-heading">
      メニュー
    </div>

    <!-- メニュー項目 -->
    <nav
      class="blur-background-drawer-menu_nav"
      aria-label="メインメニュー">

      <a class="blur-background-drawer-menu_link" href="#">
        ホーム
      </a>

      <a class="blur-background-drawer-menu_link" href="#">
        サービス
      </a>

      <a class="blur-background-drawer-menu_link" href="#">
        お問い合わせ
      </a>

    </nav>

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

  </div>

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

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ドロワーメニューを開く操作エリア */
.blur-background-drawer-menu_wrap{
  width:100%; /* 画面幅に合わせて縮小する */
  max-width:700px; /* 操作エリアの最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 操作エリア内側の余白 */
  border:1px solid #e5e7eb; /* 操作エリアの枠線 */
  border-radius:18px; /* 操作エリアの角丸 */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃え */
}

/* 操作エリアのタイトル */
.blur-background-drawer-menu_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}

/* 操作エリアの説明文 */
.blur-background-drawer-menu_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* ドロワーメニューを開くボタン */
.blur-background-drawer-menu_open{
  padding:12px 26px; /* ボタン内側の上下・左右余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 開くボタンへマウスを重ねた状態 */
.blur-background-drawer-menu_open:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* ドロワーメニュー表示中の半透明背景 */
.blur-background-drawer-menu_overlay{
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体を覆う */
  z-index:9998; /* ドロワーメニューより背面へ配置 */
  background:rgba(15,23,42,.35); /* 半透明背景。.35を大きくすると暗くなる */
  -webkit-backdrop-filter:blur(7px); /* Safari用。7pxを大きくするとぼかしが強くなる */
  backdrop-filter:blur(7px); /* 背後にあるページ内容を7pxぼかす */
  opacity:0; /* 閉じている状態では透明 */
  visibility:hidden; /* 閉じている状態では非表示 */
  pointer-events:none; /* 閉じている状態では操作を受け付けない */
  transition:
    opacity .3s ease,
    visibility .3s ease; /* 0.3秒で背景を切り替える */
}

/* ドロワーメニューを開いたときの半透明背景 */
.blur-background-drawer-menu_overlay.is-active{
  opacity:1; /* 半透明背景を表示 */
  visibility:visible; /* 表示状態にする */
  pointer-events:auto; /* 背景側の操作を遮る */
}

/* ドロワーメニュー本体 */
.blur-background-drawer-menu_drawer{
  position:fixed; /* 画面へ固定 */
  top:0; /* 画面上端へ配置 */
  left:0; /* 画面左端へ配置 */
  z-index:9999; /* 半透明背景より前面へ配置 */
  width:320px; /* ドロワーメニューの横幅 */
  max-width:85%; /* 小さい画面での最大幅 */
  height:100vh; /* 画面の高さ全体を使用 */
  padding:32px 24px; /* 上下32px・左右24pxの内側余白 */
  overflow-y:auto; /* 内容が高い場合は縦スクロール可能にする */
  background:#ffffff; /* ドロワーメニューの背景色 */
  font-family:sans-serif; /* ドロワーメニューのフォント */
  transform:translateX(calc(-100% - 40px)); /* 画面左側へ隠す */
  visibility:hidden; /* 閉じている状態では非表示 */
  pointer-events:none; /* 閉じている状態では操作を受け付けない */
  transition:
    transform .3s ease,
    visibility .3s ease; /* 0.3秒でドロワーメニューを開閉する */
}

/* ドロワーメニューを開いた状態 */
.blur-background-drawer-menu_drawer.is-active{
  transform:translateX(0); /* 画面内へ移動 */
  visibility:visible; /* 表示状態にする */
  pointer-events:auto; /* ドロワーメニュー内を操作可能にする */
  box-shadow:12px 0 30px rgba(15,23,42,.18); /* 右側へ影を表示 */
}

/* ドロワーメニューの見出し */
.blur-background-drawer-menu_heading{
  margin:0 0 28px; /* 下側28pxの余白 */
  color:#111827; /* 見出しの文字色 */
  font-size:24px; /* 見出しの文字サイズ */
  font-weight:700; /* 見出しを太字にする */
}

/* メニュー項目全体 */
.blur-background-drawer-menu_nav{
  display:flex; /* メニュー項目を並べる */
  margin:0 0 28px; /* 下側28pxの余白 */
  flex-direction:column; /* メニュー項目を縦方向へ並べる */
  gap:10px; /* メニュー項目同士の間隔 */
}

/* メニューリンク */
.blur-background-drawer-menu_link{
  display:block; /* リンク全体をクリック可能にする */
  padding:14px 16px; /* 上下14px・左右16pxの余白 */
  border-radius:8px; /* メニュー項目の角丸 */
  background:#f1f5f9; /* メニュー項目の背景色 */
  color:#111827; /* メニュー項目の文字色 */
  font-weight:700; /* メニュー項目を太字にする */
  text-decoration:none; /* リンクの下線を非表示 */
}

/* メニューリンクへマウスを重ねた状態 */
.blur-background-drawer-menu_link:hover{
  background:#e2e8f0; /* ホバー時の背景色 */
}

/* 閉じるボタン */
.blur-background-drawer-menu_close{
  width:100%; /* 横幅いっぱいに表示 */
  padding:12px; /* 内側の余白 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 閉じるボタンへマウスを重ねた状態 */
.blur-background-drawer-menu_close:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
  }

  /* スマートフォン用の操作エリア */
  .blur-background-drawer-menu_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のドロワーメニュー */
  .blur-background-drawer-menu_drawer{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

}

// ドロワーメニューを開くボタンを取得
const blurBackgroundDrawerMenuOpen=document.querySelector(
  "[data-blur-background-drawer-menu-open]"
);

// ドロワーメニューを閉じるボタンを取得
const blurBackgroundDrawerMenuClose=document.querySelector(
  "[data-blur-background-drawer-menu-close]"
);

// ドロワーメニュー本体を取得
const blurBackgroundDrawerMenu=document.querySelector(
  "[data-blur-background-drawer-menu-drawer]"
);

// ページ背景をぼかす半透明背景を取得
const blurBackgroundDrawerMenuOverlay=document.querySelector(
  "[data-blur-background-drawer-menu-overlay]"
);

// ドロワーメニューを開く
function openBlurBackgroundDrawerMenu(){

  // ドロワーメニューを表示
  blurBackgroundDrawerMenu.classList.add("is-active");

  // 半透明背景とぼかし効果を表示
  blurBackgroundDrawerMenuOverlay.classList.add("is-active");

}

// ドロワーメニューを閉じる
function closeBlurBackgroundDrawerMenu(){

  // ドロワーメニューを非表示
  blurBackgroundDrawerMenu.classList.remove("is-active");

  // 半透明背景とぼかし効果を非表示
  blurBackgroundDrawerMenuOverlay.classList.remove("is-active");

}

// 「メニューを開く」をクリックしたときに開く
blurBackgroundDrawerMenuOpen.addEventListener(
  "click",
  openBlurBackgroundDrawerMenu
);

// 「閉じる」をクリックしたときに閉じる
blurBackgroundDrawerMenuClose.addEventListener(
  "click",
  closeBlurBackgroundDrawerMenu
);

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで「メニューを開く」ボタン、半透明の背景、ドロワーメニュー、メニュー項目、「閉じる」ボタンを配置し、CSSでドロワーメニューのスライド表示とページ背景のぼかし効果を設定しています。JavaScriptでは、ドロワーメニューと半透明背景へis-activeクラスを追加・削除して表示状態を切り替えます。

「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示されます。同時に画面全体へ半透明背景が表示され、backdrop-filterによってページ側の内容へぼかし効果が加わります。ドロワーメニュー本体は半透明背景より前面に配置されるため、メニュー内の文字やリンクはぼかされません。

このサンプルでは外部サービスや外部ライブラリを使用しておらず、APIキーや利用者固有のIDなども必要ありません。ドロワーメニューを閉じる操作は「閉じる」ボタンだけに設定しており、半透明背景をクリックしても閉じない構成です。

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

各ファイルの役割
index.html
「メニューを開く」ボタン、ページ背景へぼかし効果を加える半透明背景、ドロワーメニュー本体、ナビゲーションリンク、「閉じる」ボタンを配置しています。操作エリアのタイトルや説明文、ドロワーメニューの見出し、メニュー項目の文字、リンク先を変更する場合はindex.htmlを編集します。

style.css
操作エリア、開くボタン、半透明背景、ぼかし効果、ドロワーメニュー、メニューリンク、閉じるボタンのデザインを設定しています。ページ背景のぼかしには-webkit-backdrop-filter:blur(7px);とbackdrop-filter:blur(7px);を使用しています。ドロワーメニューの横幅、余白、色、角丸、影、ぼかし量、アニメーション速度などを変更する場合はstyle.cssを編集します。

script.js
ドロワーメニューの開閉処理を担当します。「メニューを開く」をクリックすると、ドロワーメニューと半透明背景へis-activeクラスを追加します。「閉じる」をクリックすると両方からis-activeクラスを削除します。半透明背景にはクリックイベントを設定していないため、背景をクリックしてもドロワーメニューは閉じません。

設置方法・使い方
sampleフォルダを作成し、その直下へindex.html、style.css、script.jsを配置してください。3ファイルは同じ階層へ保存します。index.htmlでは<link rel="stylesheet" href="style.css">でstyle.cssを読み込み、ページ下部の<script src="script.js"></script>でscript.jsを読み込む構成です。

ファイルを配置したら、sample/index.htmlをブラウザで開いて動作を確認します。「メニューを開く」をクリックすると、画面左側からドロワーメニューが表示され、ページ背景が暗くなったうえでぼかされます。「閉じる」をクリックすると、ドロワーメニューと半透明背景が非表示になり、ページ背景のぼかしも解除されます。

メニュー項目にはサンプルとしてhref="#"を設定しています。実際のサイトで使用する場合は、index.htmlの各リンクに設定されているhref="#"を、移動先ページのURLやパスへ変更してください。

カスタマイズできる内容
index.htmlでは、「背景をぼかすドロワーメニュー」というタイトル、「メニューを開く」をクリックしたときの説明文、ドロワーメニュー内の「メニュー」という見出し、「ホーム」「サービス」「お問い合わせ」の各メニュー項目、「閉じる」ボタンの文字を変更できます。メニューリンクを追加する場合は、blur-background-drawer-menu_linkクラスを付けたa要素をnav要素内へ追加します。

style.cssでは、操作エリアの最大横幅や余白、背景色、角丸、開くボタンと閉じるボタンの色、ドロワーメニューの横幅、メニュー項目の背景色、ページ背景の暗さ、ぼかし量、影、開閉アニメーションの速度などを変更できます。ドロワーメニューの基本構成はそのままに、サイトのデザインに合わせて見た目を調整できます。

数値調整
style.css
max-width:700px;
ドロワーメニューを開く操作エリアの最大横幅です。700pxを大きくすると操作エリアが横に広がり、小さくすると狭くなります。

margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置しています。

padding:32px;
操作エリアの内側余白です。32pxを大きくするとタイトルやボタンと外枠との間隔が広がります。

border-radius:18px;
操作エリアの角丸です。18pxを大きくすると丸みが強くなり、小さくすると角が直線に近づきます。

font-size:22px;
操作エリアのタイトル文字サイズです。22pxを変更するとタイトルの大きさが変わります。

padding:12px 26px;
「メニューを開く」ボタンの内側余白です。12pxが上下、26pxが左右の余白です。値を大きくするとボタンが大きくなります。

background:rgba(15,23,42,.35);
ドロワーメニュー表示中に重ねる半透明背景です。.35が透明度です。値を大きくするとページ背景が暗くなり、小さくすると明るく見えます。

-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
ページ背景のぼかし量です。7pxを大きくするとぼかしが強くなり、小さくすると弱くなります。両方の値を同じ数値へ変更してください。

transition:opacity .3s ease, visibility .3s ease;
半透明背景を表示・非表示にする時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。

width:320px;
ドロワーメニューの横幅です。320pxを大きくするとメニューが広くなり、小さくすると狭くなります。

max-width:85%;
ドロワーメニューが画面幅に対して占める最大幅です。画面幅が狭い場合でも、ドロワーメニューが画面全体を覆いすぎないようにしています。

height:100vh;
ドロワーメニューの高さです。100vhでブラウザ画面の高さいっぱいに表示します。

padding:32px 24px;
ドロワーメニュー内側の余白です。32pxが上下、24pxが左右の余白です。値を変更するとメニュー内容と端との間隔が変わります。

transform:translateX(calc(-100% - 40px));
閉じている状態でドロワーメニューを画面左側へ隠す位置です。40pxを大きくすると、さらに左側へ移動した状態から表示されます。

transition:transform .3s ease, visibility .3s ease;
ドロワーメニューを開閉する時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速くスライドします。

box-shadow:12px 0 30px rgba(15,23,42,.18);
開いているドロワーメニューの右側へ表示する影です。12pxが横方向の位置、0が縦方向の位置、30pxがぼかし量、.18が影の透明度です。

font-size:24px;
ドロワーメニューの見出し文字サイズです。24pxを変更すると「メニュー」の文字サイズが変わります。

margin:0 0 28px;
ドロワーメニューの見出しやナビゲーション下側の余白です。28pxを変更すると次の要素との間隔が変わります。

gap:10px;
「ホーム」「サービス」「お問い合わせ」のメニュー項目同士の間隔です。10pxを大きくすると各項目の間隔が広がります。

padding:14px 16px;
各メニューリンクの内側余白です。14pxが上下、16pxが左右の余白です。値を大きくするとメニュー項目が大きくなります。

border-radius:8px;
開くボタン、メニューリンク、閉じるボタンに使用している角丸です。8pxを大きくすると丸みが強くなります。

padding:12px;
「閉じる」ボタンの内側余白です。12pxを大きくするとボタンの高さが増えます。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。操作エリアにはwidth:100%とmax-width:700pxを設定しているため、PCでは最大700pxで表示され、画面幅が狭くなると利用できる横幅に合わせて縮小されます。ドロワーメニューにはwidth:320pxとmax-width:85%を設定しており、スマートフォンなどの狭い画面では画面幅の85%を超えないように表示されます。

画面幅640px以下では、@media (max-width:640px)によってbodyの余白をpadding:24px 16px;へ変更し、操作エリアとドロワーメニューの余白をpadding:24px 18px;へ縮小しています。PC・タブレット・スマートフォンの画面幅に合わせて利用できる構成です。