背景をぼかして表示するドロワーメニューの作り方
背景をぼかして表示するドロワーメニューの作り方を紹介します。ドロワーメニューを開いたときに背景へぼかし効果を適用することで、メニューへ自然に視線を集められるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、ライブラリを使わずに導入できます。
このサンプルでは、ボタンをクリックするとドロワーメニューがスライド表示され、同時に背景へぼかし効果が適用されます。閉じるボタンや背景をクリックするとドロワーメニューが閉じ、背景も元の状態へ戻ります。お問い合わせページや会員サイト、管理画面、ECサイトなど、メニューへ集中して操作してほしい場面で利用しやすい構成です。
タイトルや説明文、ボタンの文字はもちろん、ドロワーメニューの幅や背景色、ぼかしの強さ、アニメーション速度なども自由に変更できます。初心者でも構造を理解しやすいコメント付きのコードになっているため、そのまま利用するだけでなく、自分のWebサイトに合わせてカスタマイズしながら活用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「ドロワーメニューを開く」をクリックすると背景がぼかされ、ドロワーメニューが表示されます。「閉じる」または背景をクリックすると元の表示へ戻ります。
コードをコピーして使おう！
<!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_page" data-page>
<!-- 案内エリア -->
<div 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-open>
ドロワーメニューを開く
</button>
</div>
</main>
<!-- ドロワーメニュー表示時の背景 -->
<div
class="blur-background-drawer-menu_overlay"
data-overlay
aria-hidden="true">
<!-- ドロワーメニュー本体 -->
<div
class="blur-background-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="blur-background-drawer-menu-title">
<!-- ドロワーメニューのタイトル -->
<div
class="blur-background-drawer-menu_drawer-title"
id="blur-background-drawer-menu-title">
メニュー
</div>
<!-- ドロワーメニューの説明文 -->
<p class="blur-background-drawer-menu_drawer-text">
背景をぼかしながら表示されるドロワーメニューです。
</p>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="blur-background-drawer-menu_close"
type="button"
data-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* =========================================
共通設定
========================================= */
/* すべての要素と疑似要素 */
*,
*::before,
*::after{
box-sizing:border-box; /* paddingとborderを要素の幅と高さに含める */
}
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* ページ内のボタン */
button{
font:inherit; /* 親要素と同じフォントを使用 */
}
/* =========================================
背景ぼかし対象
========================================= */
/* 背景ぼかしの対象となるページ内容 */
.blur-background-drawer-menu_page{
min-height:100vh; /* 最低でも画面の高さいっぱいに表示 */
padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
transition:filter .3s ease; /* 0.3秒でぼかしを変化。値を大きくすると遅く、小さくすると速くなる */
}
/* ドロワーメニュー表示中の背景 */
.blur-background-drawer-menu_page.is-blur{
filter:blur(6px); /* 6pxのぼかし。値を大きくすると強く、小さくすると弱くなる */
}
/* =========================================
案内エリア
========================================= */
/* 案内エリア全体 */
.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; /* タイトル文字を太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 案内エリアの説明文 */
.blur-background-drawer-menu_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}
/* ドロワーメニューを開くボタン */
.blur-background-drawer-menu_open{
min-height:48px; /* タップしやすい最小高さ */
padding:12px 24px; /* 上下12px・左右24pxの内側余白 */
border:none; /* ブラウザ標準の枠線を削除 */
border-radius:8px; /* ボタンの角丸 */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅くなる */
}
/* 開くボタンへマウスを重ねた状態 */
.blur-background-drawer-menu_open:hover{
background:#1d4ed8; /* ホバー時の背景色 */
}
/* =========================================
背景オーバーレイ
========================================= */
/* ドロワーメニュー表示時の背景 */
.blur-background-drawer-menu_overlay{
display:none; /* 初期状態では非表示 */
position:fixed; /* ブラウザ画面へ固定 */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9999; /* 他の要素より前面へ表示 */
align-items:stretch; /* ドロワーメニューを画面高へ伸ばす */
justify-content:flex-start; /* ドロワーメニューを画面左側へ配置 */
background:rgba(0,0,0,.25); /* 半透明の背景色。.25を大きくすると暗くなる */
}
/* ドロワーメニューの表示状態 */
.blur-background-drawer-menu_overlay.is-active{
display:flex; /* 表示用クラスが付いた時に表示 */
}
/* =========================================
ドロワーメニュー本体
========================================= */
/* ドロワーメニュー本体 */
.blur-background-drawer-menu_drawer{
width:360px; /* ドロワーメニューの横幅。値を大きくすると広がる */
max-width:90%; /* 小さい画面で画面幅を超えない最大横幅 */
height:100%; /* ブラウザ画面と同じ高さにする */
padding:28px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロールを表示 */
background:#ffffff; /* ドロワーメニューの背景色 */
box-shadow:10px 0 40px rgba(0,0,0,.2); /* ドロワーメニュー右側の影 */
animation:blur-background-drawer-menu-slide .35s ease forwards; /* 0.35秒で左側から表示 */
}
/* ドロワーメニューのタイトル */
.blur-background-drawer-menu_drawer-title{
margin:0 0 16px; /* 下側16pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトル文字を太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* ドロワーメニューの説明文 */
.blur-background-drawer-menu_drawer-text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* ドロワーメニューを閉じるボタン */
.blur-background-drawer-menu_close{
width:100%; /* ドロワーメニューの横幅いっぱいに表示 */
min-height:48px; /* タップしやすい最小高さ */
padding:12px 20px; /* 上下12px・左右20pxの内側余白 */
border:none; /* ブラウザ標準の枠線を削除 */
border-radius:8px; /* ボタンの角丸 */
background:#111827; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:background .2s ease; /* 0.2秒で背景色を変化 */
}
/* 閉じるボタンへマウスを重ねた状態 */
.blur-background-drawer-menu_close:hover{
background:#374151; /* ホバー時の背景色 */
}
/* =========================================
ドロワー表示アニメーション
========================================= */
@keyframes blur-background-drawer-menu-slide{
/* アニメーション開始時 */
from{
opacity:0; /* 完全に透明な状態から開始 */
transform:translateX(-100%); /* 画面左側の外から開始 */
}
/* アニメーション終了時 */
to{
opacity:1; /* 完全に表示 */
transform:translateX(0); /* 元の位置へ移動 */
}
}
/* =========================================
スマートフォン対応
========================================= */
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン用のページ内容 */
.blur-background-drawer-menu_page{
padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小 */
}
/* スマートフォン用の案内エリア */
.blur-background-drawer-menu_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小 */
padding:24px 18px; /* 内側余白を縮小 */
}
/* スマートフォン用の開くボタン */
.blur-background-drawer-menu_open{
width:100%; /* ボタンを案内エリアの横幅いっぱいに表示 */
}
/* スマートフォン用のドロワーメニュー */
.blur-background-drawer-menu_drawer{
width:100%; /* ドロワーメニューを画面幅いっぱいに表示 */
max-width:100%; /* 最大横幅を画面幅に合わせる */
padding:24px 20px; /* 内側余白を縮小 */
}
}
// =========================================
// ドロワーメニューで使用する要素を取得
// =========================================
// 背景ぼかしの対象となるページ内容を取得
const blurBackgroundDrawerMenuPage=document.querySelector(
"[data-page]"
);
// ドロワーメニュー表示時の背景を取得
const blurBackgroundDrawerMenuOverlay=document.querySelector(
"[data-overlay]"
);
// ドロワーメニューを開くボタンを取得
const blurBackgroundDrawerMenuOpen=document.querySelector(
"[data-open]"
);
// ドロワーメニューを閉じるボタンを取得
const blurBackgroundDrawerMenuClose=document.querySelector(
"[data-close]"
);
// =========================================
// ドロワーメニューを表示
// =========================================
// 開くボタンをクリックした時
blurBackgroundDrawerMenuOpen.addEventListener("click",function(){
// ページ内容へ背景ぼかし用クラスを追加
blurBackgroundDrawerMenuPage.classList.add("is-blur");
// 背景オーバーレイへ表示用クラスを追加
blurBackgroundDrawerMenuOverlay.classList.add("is-active");
// ドロワーメニューが表示中であることを支援技術へ伝える
blurBackgroundDrawerMenuOverlay.setAttribute(
"aria-hidden",
"false"
);
});
// =========================================
// ドロワーメニューを閉じる共通処理
// =========================================
// ドロワーメニューを閉じる関数
function hideBlurBackgroundDrawerMenu(){
// ページ内容から背景ぼかし用クラスを削除
blurBackgroundDrawerMenuPage.classList.remove("is-blur");
// 背景オーバーレイから表示用クラスを削除
blurBackgroundDrawerMenuOverlay.classList.remove("is-active");
// ドロワーメニューが非表示であることを支援技術へ伝える
blurBackgroundDrawerMenuOverlay.setAttribute(
"aria-hidden",
"true"
);
}
// =========================================
// 閉じるボタンで非表示
// =========================================
// 閉じるボタンをクリックした時
blurBackgroundDrawerMenuClose.addEventListener(
"click",
hideBlurBackgroundDrawerMenu
);
// =========================================
// 背景クリックで非表示
// =========================================
// 背景オーバーレイをクリックした時
blurBackgroundDrawerMenuOverlay.addEventListener("click",function(event){
// クリックされた要素が背景自身の場合だけ閉じる
if(event.target===blurBackgroundDrawerMenuOverlay){
// ドロワーメニューを閉じる共通処理を実行
hideBlurBackgroundDrawerMenu();
}
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではドロワーメニューを開くボタン、背景表示用のオーバーレイ、ドロワーメニュー本体、閉じるボタンを作成します。CSSではページ内容のぼかし、ドロワーメニューの配置やデザイン、左側から表示するアニメーションを設定し、JavaScriptではボタン操作に合わせて背景のぼかしとドロワーメニューの表示状態を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはドロワーメニュー全体を構成するファイルです。案内エリアのタイトルや説明文、「ドロワーメニューを開く」の文字、ドロワーメニュー内のタイトルや説明文、「閉じる」の文字を変更できます。
style.cssはページ内容、案内エリア、背景オーバーレイ、ドロワーメニュー、各ボタンのデザインと表示方法を設定するファイルです。背景のぼかし具合、オーバーレイの色や透明度、ドロワーメニューの横幅、余白、背景色、影、表示アニメーションなどを変更できます。
script.jsはドロワーメニューの表示と非表示を制御するファイルです。開くボタンをクリックするとページ内容へぼかし用クラスを追加し、同時にオーバーレイとドロワーメニューを表示します。「閉じる」ボタン、またはドロワーメニュー外側の背景をクリックすると、ぼかしと表示用クラスを削除して元の状態へ戻します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「ドロワーメニューを開く」をクリックするとページ内容がぼかされ、画面左側からドロワーメニューが表示されます。「閉じる」ボタン、またはドロワーメニュー外側の背景をクリックするとメニューが閉じ、背景のぼかしも解除されます。
カスタマイズできる内容
index.htmlでは案内エリアとドロワーメニュー内のタイトル、説明文、開くボタンと閉じるボタンの文字を変更できます。用途に合わせてサイトメニューや会員ページ、管理画面などで使用する内容へ変更できます。
style.cssでは案内エリアの横幅や余白、背景色、ボタンの色や角丸、ページ内容のぼかし具合、オーバーレイの透明度、ドロワーメニューの横幅、内側余白、背景色、影などを変更できます。filter:blur(6px);を変更すると背景のぼかし具合を調整でき、background:rgba(0,0,0,.25);を変更するとドロワーメニュー表示中の背景色と暗さを調整できます。
数値調整
style.css
padding:40px 20px;
ページ内容の上下・左右余白です。40pxで上下、20pxで左右の余白を調整できます。
transition:filter .3s ease;
ページ内容のぼかしが切り替わる時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。
filter:blur(6px);
ドロワーメニュー表示中の背景のぼかし具合です。6pxを大きくすると強くぼかされ、小さくするとぼかしが弱くなります。
max-width:700px;
案内エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
案内エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
案内エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
案内エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
案内エリアのタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
min-height:48px;
開くボタンと閉じるボタンの最小高さです。値を大きくするとボタンが高くなります。
padding:12px 24px;
開くボタンの内側余白です。12pxで上下、24pxで左右の余白を調整できます。
transition:background .2s ease;
ボタンへマウスを重ねたときに背景色が切り替わる時間です。.2sを大きくするとゆっくり、小さくすると速く変化します。
background:rgba(0,0,0,.25);
ドロワーメニュー表示中に画面を覆う背景の色と透明度です。最後の.25を大きくすると背景が暗くなり、小さくすると元のページが見えやすくなります。
width:360px;
ドロワーメニューの横幅です。値を大きくすると横に広がり、小さくすると狭くなります。max-width:90%;により、通常時でも画面幅の90%を超えないようにしています。
padding:28px;
ドロワーメニューの内側余白です。値を大きくすると内容と画面端の間隔が広がり、小さくすると狭くなります。
box-shadow:10px 0 40px rgba(0,0,0,.2);
ドロワーメニュー右側の影です。10pxで横方向の位置、40pxでぼかしの広がりを調整できます。
animation:blur-background-drawer-menu-slide .35s ease forwards;
ドロワーメニューが左側から表示されるアニメーション時間です。.35sを大きくするとゆっくり表示され、小さくすると速く表示されます。
transform:translateX(-100%);
アニメーション開始時にドロワーメニュー自身の横幅分だけ左側へ移動させます。translateX(0)まで移動することで、画面左側から表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの案内エリアへwidth:100%;とmax-width:700px;を指定し、画面幅に合わせて縮小できるようにしています。通常時のドロワーメニューにはwidth:360px;とmax-width:90%;を指定しています。また、640px以下ではページと案内エリアの余白を小さくし、開くボタンとドロワーメニューをwidth:100%;へ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント