コピペで完結!ドロワーメニュー#07【背景グラデーション付き/半透明オーバーレイ】

html/css/js

#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; /* アニメーションを完全停止 */
  }
}

コメント