ドロワーメニュー表示時に背景をぼかす方法【HTML/CSS/JavaScript・サンプルコード付き】
ドロワーメニュー
ドロワーメニュー表示時に背景をぼかす方法
ドロワーメニュー表示時に背景をぼかす方法を紹介します。「メニューを開く」ボタンをクリックすると、画面左側からドロワーメニューが表示され、メニュー以外のページ内容へぼかし効果が加わります。背景とメニューを視覚的に分け、開いているメニューへ注目を集めたい場合に利用できます。
このサンプルはHTML・CSS・JavaScriptだけで動作します。CSSのbackdrop-filterをオーバーレイへ設定し、半透明の暗い背景とぼかし効果を同時に表示します。閉じるボタン、背景部分、またはメニュー項目をクリックすると、ドロワーメニューと背景のぼかしが解除されます。
コーポレートサイト、サービスサイト、会員ページ、管理画面など、ドロワーメニューを目立たせたい画面に使えます。ぼかしの強さ、背景の暗さ、メニューの横幅、色、余白、影、スライド速度、メニュー項目はコード内で変更できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
コードをコピーして使おう！
<!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-drawer-menu_page">
<div class="blur-drawer-menu_wrap">
<h1 class="blur-drawer-menu_title">
ドロワーメニュー表示時に背景をぼかす
</h1>
<p class="blur-drawer-menu_text">
「メニューを開く」をクリックすると、背景をぼかしながらドロワーメニューを表示します。
</p>
<button
class="blur-drawer-menu_open"
type="button"
data-blur-drawer-open>
メニューを開く
</button>
</div>
</main>
<!-- 背景オーバーレイ -->
<div
class="blur-drawer-menu_overlay"
data-blur-drawer-overlay>
</div>
<!-- ドロワーメニュー -->
<aside
class="blur-drawer-menu_drawer"
data-blur-drawer
aria-hidden="true">
<div class="blur-drawer-menu_header">
<h2 class="blur-drawer-menu_heading">
メニュー
</h2>
<button
class="blur-drawer-menu_close"
type="button"
data-blur-drawer-close
aria-label="閉じる">
</button>
</div>
<nav class="blur-drawer-menu_nav">
<a href="#" class="blur-drawer-menu_link">ホーム</a>
<a href="#" class="blur-drawer-menu_link">サービス</a>
<a href="#" class="blur-drawer-menu_link">お知らせ</a>
<a href="#" class="blur-drawer-menu_link">お問い合わせ</a>
</nav>
</aside>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* すべての要素 */
*,
*::before,
*::after{
box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}
/* ページ全体 */
body{
margin:0; /* ページ外側の余白をなくす */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* メインコンテンツ */
.blur-drawer-menu_page{
min-height:100vh; /* 画面の高さいっぱいへ広げる */
padding:40px 20px; /* 上下40px・左右20pxの余白 */
}
/* 操作エリア */
.blur-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-drawer-menu_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:28px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 説明文 */
.blur-drawer-menu_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* メニューを開くボタン */
.blur-drawer-menu_open{
padding:12px 26px; /* ボタン内側の上下・左右余白 */
border:none; /* ボタンの枠線を非表示 */
border-radius:8px; /* ボタンの角丸 */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* メニューを開くボタンへマウスを重ねた状態 */
.blur-drawer-menu_open:hover{
background:#1d4ed8; /* マウスを重ねた時の背景色 */
}
/* 背景オーバーレイ */
.blur-drawer-menu_overlay{
position:fixed; /* 画面全体へ固定 */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9998; /* ドロワーメニューより背面へ表示 */
background:rgba(15,23,42,.4); /* 半透明の背景色 */
-webkit-backdrop-filter:blur(7px); /* Safariで背景を7pxぼかす */
backdrop-filter:blur(7px); /* 背景を7pxぼかす */
opacity:0; /* 初期状態では透明 */
visibility:hidden; /* 初期状態では操作できないようにする */
transition:
opacity .3s,
visibility .3s; /* 0.3秒で背景を表示・非表示にする */
}
/* 背景オーバーレイの表示状態 */
.blur-drawer-menu_overlay.is-active{
opacity:1; /* 背景オーバーレイを表示 */
visibility:visible; /* 背景オーバーレイを操作可能にする */
}
/* ドロワーメニュー本体 */
.blur-drawer-menu_drawer{
position:fixed; /* 画面左側へ固定 */
top:0; /* 画面上端へ配置 */
left:0; /* 画面左端へ配置 */
z-index:9999; /* 背景オーバーレイより前面へ表示 */
width:320px; /* ドロワーメニューの横幅 */
max-width:85%; /* 画面幅の85%を超えないようにする */
height:100vh; /* 画面の高さいっぱいへ広げる */
padding:28px 24px; /* 上下28px・左右24pxの内側余白 */
background:#ffffff; /* ドロワーメニューの背景色 */
box-shadow:12px 0 30px rgba(15,23,42,.18); /* 右側へ表示する影 */
transform:translateX(calc(-100% - 40px)); /* 画面左外へ隠す */
transition:transform .35s ease; /* 0.35秒で左側から開閉する */
overflow-y:auto; /* 内容が長い場合は縦スクロール可能にする */
}
/* ドロワーメニューの表示状態 */
.blur-drawer-menu_drawer.is-active{
transform:translateX(0); /* ドロワーメニューを画面内へ表示 */
}
/* ドロワーメニュー上部 */
.blur-drawer-menu_header{
display:flex; /* タイトルと閉じるボタンを横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 左右へ分けて配置 */
gap:16px; /* タイトルと閉じるボタンの間隔 */
margin-bottom:28px; /* 下側28pxの余白 */
}
/* ドロワーメニューのタイトル */
.blur-drawer-menu_heading{
margin:0; /* 外側余白をなくす */
color:#111827; /* タイトルの文字色 */
font-size:26px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 閉じるボタン */
.blur-drawer-menu_close{
position:relative; /* ×印を配置する基準 */
flex-shrink:0; /* ボタンが縮まないようにする */
width:42px; /* ボタンの横幅 */
height:42px; /* ボタンの高さ */
padding:0; /* ボタン内側の余白をなくす */
border:1px solid #cbd5e1; /* ボタンの枠線 */
border-radius:10px; /* ボタンの角丸 */
background:#f8fafc; /* ボタンの背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 閉じるボタンの2本の線 */
.blur-drawer-menu_close::before,
.blur-drawer-menu_close::after{
content:""; /* 擬似要素を表示 */
position:absolute; /* ボタン中央へ配置 */
top:50%; /* 上端から50%の位置 */
left:50%; /* 左端から50%の位置 */
width:20px; /* 線の長さ */
height:2px; /* 線の太さ */
border-radius:2px; /* 線の角を丸くする */
background:#111827; /* ×印の色 */
}
/* ×印の1本目 */
.blur-drawer-menu_close::before{
transform:translate(-50%,-50%) rotate(45deg); /* 線を右下がりへ傾ける */
}
/* ×印の2本目 */
.blur-drawer-menu_close::after{
transform:translate(-50%,-50%) rotate(-45deg); /* 線を左下がりへ傾ける */
}
/* ナビゲーションメニュー */
.blur-drawer-menu_nav{
display:flex; /* メニュー項目を並べる */
flex-direction:column; /* メニュー項目を縦並びにする */
gap:12px; /* メニュー項目同士の間隔 */
}
/* ナビゲーションリンク */
.blur-drawer-menu_link{
display:block; /* リンク全体をクリック可能にする */
padding:16px 18px; /* リンク内側の上下・左右余白 */
border-radius:10px; /* リンクの角丸 */
background:#f1f5f9; /* リンクの背景色 */
color:#111827; /* リンクの文字色 */
font-size:17px; /* リンクの文字サイズ */
font-weight:700; /* リンク文字を太字にする */
line-height:1.5; /* リンク文字の行間 */
text-decoration:none; /* リンクの下線を非表示 */
}
/* ナビゲーションリンクへマウスを重ねた状態 */
.blur-drawer-menu_link:hover{
background:#dbeafe; /* マウスを重ねた時の背景色 */
color:#1d4ed8; /* マウスを重ねた時の文字色 */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* スマートフォン用のメインコンテンツ */
.blur-drawer-menu_page{
padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
}
/* スマートフォン用の操作エリア */
.blur-drawer-menu_wrap{
margin:24px auto; /* 上下24pxの余白へ変更 */
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のタイトル */
.blur-drawer-menu_title{
font-size:24px; /* タイトルの文字サイズを縮小 */
}
/* スマートフォン用のドロワーメニュー */
.blur-drawer-menu_drawer{
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
}
// メニューを開くボタンを取得
const blurDrawerMenuOpen=document.querySelector(
"[data-blur-drawer-open]"
);
// メニューを閉じるボタンを取得
const blurDrawerMenuClose=document.querySelector(
"[data-blur-drawer-close]"
);
// 背景オーバーレイを取得
const blurDrawerMenuOverlay=document.querySelector(
"[data-blur-drawer-overlay]"
);
// ドロワーメニュー本体を取得
const blurDrawerMenuDrawer=document.querySelector(
"[data-blur-drawer]"
);
// ドロワーメニュー内のリンクをすべて取得
const blurDrawerMenuLinks=document.querySelectorAll(
".blur-drawer-menu_link"
);
// ドロワーメニューを開く共通処理
function openBlurDrawerMenu(){
// 背景オーバーレイを表示
blurDrawerMenuOverlay.classList.add("is-active");
// ドロワーメニューを表示
blurDrawerMenuDrawer.classList.add("is-active");
// ドロワーメニューを表示状態へ変更
blurDrawerMenuDrawer.setAttribute("aria-hidden","false");
}
// ドロワーメニューを閉じる共通処理
function closeBlurDrawerMenu(){
// 背景オーバーレイを非表示
blurDrawerMenuOverlay.classList.remove("is-active");
// ドロワーメニューを非表示
blurDrawerMenuDrawer.classList.remove("is-active");
// ドロワーメニューを非表示状態へ変更
blurDrawerMenuDrawer.setAttribute("aria-hidden","true");
}
// メニューを開くボタンをクリックした時
blurDrawerMenuOpen.addEventListener("click",function(){
// ドロワーメニューを開く
openBlurDrawerMenu();
});
// 閉じるボタンをクリックした時
blurDrawerMenuClose.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeBlurDrawerMenu();
});
// 背景オーバーレイをクリックした時
blurDrawerMenuOverlay.addEventListener("click",function(){
// ドロワーメニューを閉じる
closeBlurDrawerMenu();
});
// 各メニューリンクへクリック処理を設定
blurDrawerMenuLinks.forEach(function(link){
// メニューリンクをクリックした時
link.addEventListener("click",function(event){
// サンプル用にページ先頭への移動を防ぐ
event.preventDefault();
// ドロワーメニューを閉じる
closeBlurDrawerMenu();
});
});
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。JavaScriptでドロワーメニューの開閉を制御し、CSSのbackdrop-filterを利用してドロワーメニュー表示中の背景をぼかします。シンプルな構成なので、そのままコピーしてすぐに利用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlでは画面のレイアウトやドロワーメニューの構造を定義しています。メニュー項目やタイトルなどの表示内容を変更できます。
style.cssではレイアウト・配色・背景ぼかし・ドロワーメニューのデザイン・アニメーションを設定しています。背景のぼかし量や色、サイズ、余白なども編集できます。
script.jsではドロワーメニューの開閉処理を行っています。開くボタン・閉じるボタン・背景クリックによる閉じる動作を管理しています。
設置方法・使い方
sampleフォルダ内へ3ファイルを配置します。配置後は sample/index.html をブラウザで開くだけで利用できます。「メニューを開く」をクリックすると背景がぼけた状態でドロワーメニューが表示されます。
カスタマイズできる内容
index.htmlではタイトル・説明文・メニュー項目を変更できます。style.cssでは背景色・文字色・ぼかし量・ドロワーメニューの横幅・角丸・影・余白・アニメーション速度を変更できます。script.jsでは開閉処理や閉じるタイミングなどを用途に合わせて変更できます。
数値調整
style.css の backdrop-filter:blur(7px); の7pxは背景のぼかし量です。値を大きくするとより強くぼけ、小さくすると控えめになります。
style.css の transition:transform .35s ease; の0.35秒はドロワーメニューの開閉速度です。値を大きくするとゆっくり、小さくすると素早く表示されます。
style.css の transition:opacity .3s; の0.3秒は背景ぼかしの表示速度です。値を変更するとフェードイン・フェードアウトの速度が変わります。
レスポンシブ対応
style.cssの max-width:85% と @media(max-width:640px) を利用して画面サイズに応じてドロワーメニューの幅や余白を自動調整しています。PC・タブレット・スマートフォンでもレイアウトが崩れにくく、そのまま利用できます。
ドロワーメニュー表示時に背景をぼかす方法【HTML/CSS/JavaScript・サンプルコード付き】
コメント