#07 ドロワーメニュー【背景グラデーション付き/半透明オーバーレイ】
オーバーレイを「半透明 × グラデーション」で表現し、モダンな雰囲気を演出する右スライドのドロワー実装です。アクセシビリティ(role="dialog"
、aria-modal
、閉じる操作の一貫性、ESC キー対応)と、prefers-reduced-motion
によるアニメーション簡略にも配慮しています。この記事では、デモ用コードとそのまま使えるコピペ用コード(セクション3)を分けて掲載します。
コードについて
本記事のコードは AI(ChatGPT)による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
デモ
右上のボタンからドロワーを開けます。背景は半透明のグラデーションです。
コードをコピーして使おう!
/* ------------------------------------------------------------
セクション全体体裁:#demo-section.demo-wrap
→ 各デモ共通のベーススタイル。中央寄せ・余白などを調整。
------------------------------------------------------------ */
#demo-section.demo-wrap{
max-width:960px; /* コンテンツ幅の上限(中央寄せレイアウト) */
margin:0 auto; /* 左右中央に配置 */
padding:0 16px; /* 横方向の余白を確保(スマホ閲覧対策) */
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic UI",sans-serif; /* 読みやすい汎用フォント */
color:#0f172a; /* 標準の濃いグレー文字色 */
}
/* --- セクション見出し(h2) --- */
#demo-section h2{
font-size:clamp(18px,2.6vw,24px); /* レスポンシブで可変サイズ */
margin:28px 0 10px; /* 上下余白を設定 */
}
/* ------------------------------------------------------------
開くボタン(右上ボタン)
→ ドロワーを開くトリガー。操作しやすくデザイン。
------------------------------------------------------------ */
#drawer-grad-07 .btn{
background:#0b6bff; /* 鮮やかな青でアクセントを出す */
color:#fff; /* 白文字でコントラストを確保 */
border:none; /* デフォルトの境界線を削除 */
border-radius:12px; /* 丸みでタップしやすさを強調 */
padding:10px 14px; /* クリック領域を十分に確保 */
cursor:pointer; /* ポインタカーソルで操作感を出す */
transition:opacity .24s ease, transform .24s ease; /* 滑らかな変化 */
}
/* --- ホバー時:軽く浮かせるアニメーション --- */
#drawer-grad-07 .btn:hover{
opacity:.9; /* わずかに透明化で反応を出す */
transform:translateY(-1px); /* 1px上に動かしクリック感を演出 */
}
/* --- クリック時(押し込み) --- */
#drawer-grad-07 .btn:active{
transform:translateY(0); /* 押し込むような動きを再現 */
}
/* ------------------------------------------------------------
背景オーバーレイ(グラデーション)
→ ドロワー背面に敷く半透明レイヤー。
linear-gradient + rgba透過でモダンな印象に。
------------------------------------------------------------ */
#drawer-grad-07 .layer{
position:fixed; /* 画面全体に固定配置 */
inset:0; /* top, right, bottom, left 全て0で全画面覆う */
background:linear-gradient(135deg, /* 対角線方向にグラデーション */
rgba(11,107,255,0.42), /* 明るい青の半透明 */
rgba(2,8,23,0.55) /* 濃いインク色の半透明 */
);
opacity:0; /* 初期状態は透明で非表示 */
pointer-events:none; /* 非表示時はクリック無効 */
transition:opacity .26s ease; /* フェードイン・アウトを滑らかに */
z-index:1000; /* コンテンツより上、パネルより下 */
}
/* ------------------------------------------------------------
ドロワーパネル本体
→ 右からスライドインする白背景のパネル。
role="dialog" aria-modal="true" と組み合わせてモーダル的に動作。
------------------------------------------------------------ */
#drawer-grad-07 .panel{
position:fixed; /* 画面右側に固定配置 */
top:0; right:0; /* 上端・右端に固定 */
height:100dvh; /* 画面高いっぱい(iOS Safari対策) */
width:min(86vw,360px); /* 横幅:画面の86%または360pxの小さい方 */
background:#fff; /* 白背景で内容を明るく */
color:#0f172a; /* 標準テキスト色 */
border-left:1px solid #e5e7eb;/* 左境界線で分離 */
box-shadow:-8px 0 28px rgba(2,8,23,.18); /* 柔らかな影を右から落とす */
transform:translateX(100%); /* 初期は画面外(右端の外) */
transition:transform .26s ease-out; /* スライドインアニメーション */
display:flex; flex-direction:column; /* 縦に積み上げる構造 */
z-index:1001; /* 背景オーバーレイより上 */
}
/* ------------------------------------------------------------
パネルヘッダー部分
→ タイトル(.drawer-title)と閉じるボタンを横並びに配置。
------------------------------------------------------------ */
#drawer-grad-07 .panel header{
display:flex; /* 横並びレイアウト */
align-items:center; /* 垂直方向中央揃え */
justify-content:space-between; /* タイトル左、ボタン右に配置 */
padding:14px; /* 内側余白を確保 */
border-bottom:1px solid #e5e7eb; /* 下線で区切る */
}
/* ------------------------------------------------------------
独自タイトル(h3廃止 → .drawer-title)
→ WordPressテーマのh3装飾を避けるため、独自クラスを使用。
------------------------------------------------------------ */
#drawer-grad-07 .drawer-title{
all:unset; /* 既定スタイルを完全リセット(WP干渉防止) */
display:block; /* ブロック要素化で安定した余白管理 */
font-size:16px; /* 見出しサイズ */
font-weight:600; /* やや太字で視認性を確保 */
color:#0f172a; /* 本文色と統一 */
line-height:1.4; /* 行間を広めに取り読みやすく */
}
/* ------------------------------------------------------------
閉じるボタン(右上に配置)
→ 枠付き・シンプルデザインで目立ちすぎず明確に。
------------------------------------------------------------ */
#drawer-grad-07 .close{
background:transparent; /* 背景透過で軽さを出す */
border:1px solid #e5e7eb;/* 枠線でボタン領域を明示 */
border-radius:10px; /* 角丸で統一感を出す */
padding:6px 10px; /* 十分なクリック領域を確保 */
font-size:12px; /* 小さめ文字サイズ */
cursor:pointer; /* ポインタカーソルで操作性UP */
}
/* ------------------------------------------------------------
メインコンテンツ領域
→ 内側のスクロール・テキスト表示用エリア。
------------------------------------------------------------ */
#drawer-grad-07 .panel main{
padding:14px; /* 内容の左右余白 */
overflow:auto; /* コンテンツが長い場合スクロール可 */
line-height:1.8; /* 行間を広めに設定し読みやすく */
}
/* ------------------------------------------------------------
開いた時の状態(.openクラス付与時)
→ 背景とパネルを同時に表示。
------------------------------------------------------------ */
#drawer-grad-07.open .layer{
opacity:1; /* 背景フェードイン */
pointer-events:auto; /* 背景クリックで閉じられるように */
}
#drawer-grad-07.open .panel{
transform:translateX(0); /* パネルを画面内にスライドイン */
}
/* ------------------------------------------------------------
動作軽減モード対応
→ prefers-reduced-motion: reduce を検出してアニメーションを無効化。
------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
#drawer-grad-07 .layer,
#drawer-grad-07 .panel{
transition:none !important; /* アニメーションを完全停止 */
}
}
コメント