コピペで完結！ドロワーメニュー#01【上・下・左・右からスライド】

/* =========================
   上スライド：CSS（行コメント付き）
   ========================= */

/* 開くボタンの見た目 */
.cp-drawer .btn{
  background:#0b6bff;   /* ボタンの背景色（アクセントカラー） */
  color:#fff;           /* 文字色は白 */
  border:none;          /* 枠線なしでフラットに */
  border-radius:12px;   /* 角丸 */
  padding:10px 14px;    /* クリックしやすい余白 */
  cursor:pointer;       /* カーソルはポインタに */
}

/* 暗幕レイヤー（初期は非表示） */
.cp-drawer .layer{
  position:fixed;                 /* 画面全体に固定配置 */
  inset:0;                        /* top/right/bottom/left を 0 に（全画面） */
  background:rgba(2,8,23,.5);     /* 半透明の黒っぽい色で背面を暗くする */
  opacity:0;                      /* 初期は透明 */
  pointer-events:none;            /* 初期はクリックを受けない */
  transition:.2s;                 /* フェードのトランジション */
  z-index:9999;                   /* パネルの背面・前景の兼ね合いで十分高く */
}

/* data-open="1" になったら暗幕を有効化（表示＆クリック可） */
.cp-drawer[data-open="1"] .layer{
  opacity:1;            /* 不透明に */
  pointer-events:auto;  /* クリック可能に（背景クリックで閉じる用） */
}

/* ドロワーパネル本体（上からスライドイン） */
.cp-drawer .panel{
  position:fixed;                          /* 画面に固定配置 */
  left:0; right:0; top:0;                  /* 画面上端に横いっぱい */
  background:#fff;                         /* パネルの背景は白 */
  color:#0f172a;                           /* テキスト色（濃紺系） */
  max-height:min(80vh,560px);              /* 高さ上限（ビューポート80%か560pxの小さい方） */
  overflow:auto;                           /* コンテンツが溢れたら内部スクロール */
  transform:translateY(-100%);             /* 初期は画面の上外へ待避 */
  transition:transform .24s ease-out;      /* スライドアニメーション */
  border-bottom:1px solid #e5e7eb;         /* 下端にボーダー */
  box-shadow:0 8px 24px rgba(2,8,23,.18);  /* 下方向へ落ちる影感 */
  z-index:10000;                           /* 暗幕より前面に配置 */
}

/* data-open="1" でスライドイン（画面内へ） */
.cp-drawer[data-open="1"] .panel{
  transform:translateY(0);
}

/* パネルのヘッダー（タイトル＆閉じるボタンの横並び） */
.cp-drawer .panel header{
  display:flex;                             /* 横並び */
  align-items:center;                       /* 垂直中央揃え */
  justify-content:space-between;            /* 左右に振り分け */
  padding:14px 16px;                        /* 内側余白 */
  border-bottom:1px solid #e5e7eb;          /* 下線で区切り */
  position:sticky; top:0;                   /* スクロールしても上部に固定 */
  background:#fff;                          /* 固定時に下が透けないよう白背景 */
  z-index:1;                                /* ヘッダーを一段前面に */
}

/* 見出しの最小体裁 */
.cp-drawer .panel header h3{
  font-size:16px;                           /* コンパクトなサイズ */
  margin:0;                                 /* 余白リセット */
}

/* 閉じるボタンの見た目 */
.cp-drawer .panel .close{
  appearance:none;                          /* ブラウザのデフォルト外観を無効化 */
  background:#fff;                          /* 背景は白 */
  border:1px solid #e5e7eb;                 /* 薄い枠線 */
  border-radius:10px;                        /* 角丸 */
  padding:6px 10px;                          /* クリックしやすい余白 */
  cursor:pointer;                            /* カーソルはポインタ */
}

/* ナビゲーション領域の外側余白 */
.cp-drawer nav{
  padding:10px 12px;
}

/* ナビゲーションの各リンク */
.cp-drawer nav a{
  display:block;                             /* ブロック化して当たり判定を広く */
  padding:10px 12px;                         /* 内側余白 */
  border-radius:10px;                        /* 角丸でチップ風 */
  color:#0f172a;                             /* 文字色 */
  text-decoration:none;                      /* 下線なし */
}

/* リンクのホバー時の背景 */
.cp-drawer nav a:hover{
  background:#f8fafc;
}

/* フォーカスリング（アクセシビリティ向上） */
.cp-drawer .btn:focus,
.cp-drawer .close:focus,
.cp-drawer .panel:focus{
  outline:2px solid #93c5fd;                /* 水色のアウトライン */
  outline-offset:2px;                        /* 少し離して見やすく */
}

<!-- ドロワー全体のラッパー -->
<div class="cp-drawer" id="drawer-top">

  <!-- 開くトリガーボタン
       data-open-drawer       : JS側がこの属性を探して開閉を紐付け
       aria-haspopup="dialog" : このボタンがダイアログを開くことを宣言
       aria-controls="drawer-top-panel" : 開く対象のパネルID を関連付け -->
  <button class="btn" data-open-drawer aria-haspopup="dialog" aria-controls="drawer-top-panel">
    メニューを開く
  </button>

  <!-- 背景を覆う暗幕。初期は非表示（CSSの opacity/pointer-events で制御） -->
  <div class="layer" aria-hidden="true"></div>

  <!-- ドロワーパネル本体
       role="dialog"                          : ダイアログロール
       aria-modal="true"                      : モーダルであることを宣言（論理的に背面操作不可）
       aria-labelledby="drawer-top-title"     : タイトル見出しと紐付け
       tabindex="-1"                          : JSでフォーカスを当てられるように -->
  <aside class="panel" id="drawer-top-panel" role="dialog" aria-modal="true" aria-labelledby="drawer-top-title" tabindex="-1">

    <!-- パネルヘッダー（タイトル＋閉じるボタン） -->
    <header>
      <!-- ダイアログタイトル（スクリーンリーダー用の名前） -->
      <h3 id="drawer-top-title">メニュー</h3>

      <!-- 閉じるボタン。data-close-drawer を JS がフック -->
      <button class="close" data-close-drawer aria-label="閉じる">閉じる</button>
    </header>

    <!-- ナビゲーション（サイト内メニュー想定） -->
    <nav aria-label="サイト内メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </aside> <!-- /panel -->

</div> <!-- /cp-drawer -->

(() => {                       // 即時実行関数：グローバル汚染を防ぐ
  const root = document.getElementById('drawer-top');  // このデモ用のルート要素
  if(!root) return;                                     // 念のため、無ければ終了

  // 各要素を取得
  const layer    = root.querySelector('.layer');               // 暗幕レイヤー
  const panel    = root.querySelector('.panel');               // パネル本体
  const openBtn  = root.querySelector('[data-open-drawer]');   // 開くボタン
  const closeBtn = root.querySelector('[data-close-drawer]');  // 閉じるボタン

  // ESC キーで閉じるハンドラ
  function onKey(e){
    if(e.key === 'Escape') close();
  }

  // 開く処理
  function open(){
    root.setAttribute('data-open','1');   // data-open="1" にして CSS で表示状態へ
    panel && panel.focus();               // 初期フォーカスをパネルへ
    document.addEventListener('keydown', onKey);  // ESC 監視開始
    document.documentElement.style.overflow = 'hidden'; // 背面スクロールを止める
  }

  // 閉じる処理
  function close(){
    root.removeAttribute('data-open');    // data-open を外して非表示へ
    document.removeEventListener('keydown', onKey); // ESC 監視解除
    openBtn && openBtn.focus();           // トリガーボタンへフォーカスを戻す（アクセシビリティ）
    document.documentElement.style.overflow = '';   // 背面スクロール解除
  }

  // クリックイベントの紐付け
  openBtn  && openBtn.addEventListener('click', open);   // 開く
  closeBtn && closeBtn.addEventListener('click', close); // 閉じる

  // 暗幕クリックで閉じる（レイヤー以外の子がクリックされても閉じないようガード）
  layer && layer.addEventListener('click', (e)=>{
    if(e.target === layer) close();
  });

  // （任意）簡易フォーカストラップ：Tab ナビゲーションがパネル外に逃げにくいようにする
  panel && panel.addEventListener('keydown', (e)=>{
    if(e.key !== 'Tab') return;  // Tab キー以外は無視
    const focusables = panel.querySelectorAll(
      'a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
    );
    if(!focusables.length) return;
    const first = focusables[0];
    const last  = focusables[focusables.length - 1];

    // 逆順（Shift+Tab）で先頭からさらに戻ろうとしたら末尾へ
    if(e.shiftKey && document.activeElement === first){
      e.preventDefault();
      last.focus();
    }
    // 順方向（Tab）で最後からさらに進もうとしたら先頭へ
    else if(!e.shiftKey && document.activeElement === last){
      e.preventDefault();
      first.focus();
    }
  });
})();

/* =========================================================
   下スライド：CSS（詳細コメント付き・そのままコピペ可）
   ========================================================= */

/* 「開く」ボタンのスタイル */
.cp-drawer .btn{
  background:#0b6bff;   /* アクセントカラー（サイト基調色に合わせて変更可） */
  color:#fff;           /* テキストは白でコントラスト確保 */
  border:none;          /* デフォルト枠線は消す */
  border-radius:12px;   /* 角を丸くしてタップしやすく */
  padding:10px 14px;    /* 触りやすいタッチ余白 */
  cursor:pointer;       /* ポインタ表示 */
}

/* 暗幕レイヤー（初期は非表示） */
.cp-drawer .layer{
  position:fixed;                 /* 画面全体に固定配置 */
  inset:0;                        /* top/right/bottom/left を 0 に（全画面） */
  background:rgba(2,8,23,.5);     /* 半透明ダークで背面を抑制 */
  opacity:0;                      /* 初期は透明（非表示） */
  pointer-events:none;            /* 初期はクリック不可 */
  transition:.2s;                 /* フェード速度（好みで） */
  z-index:9999;                   /* パネルのすぐ下になるよう高めに設定 */
}

/* data-open="1" で暗幕を表示＆クリック可 */
.cp-drawer[data-open="1"] .layer{
  opacity:1;            /* フェードイン */
  pointer-events:auto;  /* クリックを拾えるように（背景クリックで閉じる） */
}

/* ドロワーパネル本体（下からスライドイン） */
.cp-drawer .panel{
  position:fixed;                          /* 画面に固定 */
  left:0; right:0; bottom:0;               /* 画面下端に横いっぱいで固定 */
  background:#fff;                         /* 白背景 */
  color:#0f172a;                           /* テキスト色 */
  max-height:min(80vh,560px);              /* 上限高さ（ビューポート80% or 560px） */
  overflow:auto;                           /* コンテンツが溢れたら内部スクロール */
  transform:translateY(100%);              /* 初期は画面の下外へ待避 */
  transition:transform .24s ease-out;      /* スライドアニメーション */
  border-top:1px solid #e5e7eb;            /* 上端に薄いボーダー */
  box-shadow:0 -8px 24px rgba(2,8,23,.18); /* 上方向へ落ちる影で浮かせる */
  z-index:10000;                           /* 暗幕より前面に */
}

/* data-open="1" で画面内へスライドイン */
.cp-drawer[data-open="1"] .panel{
  transform:translateY(0);
}

/* パネル内ヘッダー（タイトル＋閉じるボタン） */
.cp-drawer .panel header{
  display:flex;                             /* 横並び */
  align-items:center;                       /* 垂直中央 */
  justify-content:space-between;            /* タイトル左／ボタン右 */
  padding:14px 16px;                        /* 内側余白 */
  border-bottom:1px solid #e5e7eb;          /* 下線で区切り */
  position:sticky; top:0;                   /* スクロールしても上部に固定 */
  background:#fff;                          /* 固定時に背景透けを防ぐ */
  z-index:1;                                /* 内容より前に */
}

/* 見出しの体裁（リセット＋最小サイズ） */
.cp-drawer .panel header h3{
  font-size:16px;
  margin:0;
}

/* 閉じるボタンの見た目（控えめ） */
.cp-drawer .panel .close{
  appearance:none;                          /* ブラウザデフォルト外観を無効化 */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

/* ナビ領域の外側余白 */
.cp-drawer nav{
  padding:10px 12px;
}

/* ナビリンク（大きめタップ領域） */
.cp-drawer nav a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:#0f172a;
  text-decoration:none;
}

/* ホバー背景で可読性と選択性を上げる */
.cp-drawer nav a:hover{
  background:#f8fafc;
}

/* アクセシビリティ：フォーカスリングを明示 */
.cp-drawer .btn:focus,
.cp-drawer .close:focus,
.cp-drawer .panel:focus{
  outline:2px solid #93c5fd;   /* 水色のアウトライン */
  outline-offset:2px;           /* 要素から少し離す */
}

<!-- ドロワー全体のラッパー（この中で UI が完結） -->
<div class="cp-drawer" id="drawer-bottom">

  <!-- 開くトリガーボタン
       data-open-drawer         : JS が開く処理を紐付けるフック
       aria-haspopup="dialog"   : ボタンがダイアログを開くことを支援技術に通知
       aria-controls="drawer-bottom-panel" : 連動するパネルの ID -->
  <button class="btn" data-open-drawer aria-haspopup="dialog" aria-controls="drawer-bottom-panel">
    メニューを開く
  </button>

  <!-- 背景を覆う暗幕（初期は非表示。data-open="1" で有効化） -->
  <div class="layer" aria-hidden="true"></div>

  <!-- ドロワーパネル本体（下から）
       role="dialog"                         : ダイアログロール
       aria-modal="true"                     : モーダル（背面操作を論理的に無効化）
       aria-labelledby="drawer-bottom-title" : タイトル見出しと紐付け
       tabindex="-1"                          : JS で初期フォーカスを当てるため -->
  <aside class="panel" id="drawer-bottom-panel" role="dialog" aria-modal="true" aria-labelledby="drawer-bottom-title" tabindex="-1">

    <!-- パネル上部：タイトルと閉じるボタン -->
    <header>
      <h3 id="drawer-bottom-title">メニュー</h3>
      <button class="close" data-close-drawer aria-label="閉じる">閉じる</button>
    </header>

    <!-- サイト内メニュー想定のリンク群 -->
    <nav aria-label="サイト内メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </aside> <!-- /panel -->

</div> <!-- /cp-drawer -->

(() => {  // 即時実行関数：グローバル汚染を避ける
  const root = document.getElementById('drawer-bottom');  // このデモのルート
  if(!root) return;                                       // 念のため存在チェック

  // 要素参照
  const layer   = root.querySelector('.layer');                // 暗幕
  const panel   = root.querySelector('.panel');                // パネル本体（初期フォーカス先）
  const openBtn = root.querySelector('[data-open-drawer]');    // 開くボタン
  const closeBtn= root.querySelector('[data-close-drawer]');   // 閉じるボタン

  // ESC キーで閉じる
  function onKey(e){
    if(e.key === 'Escape') close();
  }

  // 開く処理
  function open(){
    root.setAttribute('data-open','1');      // data-open="1" で CSS の表示状態へ
    panel && panel.focus();                  // パネルに初期フォーカス
    document.addEventListener('keydown', onKey);       // ESC 監視開始
    document.documentElement.style.overflow = 'hidden';// 背景スクロールを止める
  }

  // 閉じる処理
  function close(){
    root.removeAttribute('data-open');       // 非表示に戻す
    document.removeEventListener('keydown', onKey);    // ESC 監視解除
    openBtn && openBtn.focus();              // 開くボタンへフォーカス返却（A11y）
    document.documentElement.style.overflow = '';      // 背景スクロール解除
  }

  // クリック操作の紐付け
  openBtn  && openBtn.addEventListener('click', open);   // 開く
  closeBtn && closeBtn.addEventListener('click', close); // 閉じる

  // 暗幕クリックで閉じる（レイヤー自身が押された時のみ）
  layer && layer.addEventListener('click', (e) => {
    if(e.target === layer) close();
  });

  // （任意）簡易フォーカストラップ：Tab が外へ逃げにくいよう制御
  panel && panel.addEventListener('keydown', (e) => {
    if(e.key !== 'Tab') return;  // Tab だけ拾う
    const focusables = panel.querySelectorAll(
      'a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
    );
    if(!focusables.length) return;
    const first = focusables[0];
    const last  = focusables[focusables.length - 1];

    // 逆方向（Shift+Tab）で先頭からさらに戻ろうとしたら末尾へ
    if(e.shiftKey && document.activeElement === first){
      e.preventDefault();
      last.focus();
    }
    // 順方向（Tab）で末尾からさらに進もうとしたら先頭へ
    else if(!e.shiftKey && document.activeElement === last){
      e.preventDefault();
      first.focus();
    }
  });
})();

/* =========================================================
   左スライド：CSS（詳細コメント付き・そのままコピペ可）
   ========================================================= */

/* 「開く」ボタンのスタイル */
.cp-drawer .btn{
  background:#0b6bff;   /* アクセントカラー（必要に応じて変更） */
  color:#fff;           /* 文字色は白 */
  border:none;          /* 既定の枠線を消す */
  border-radius:12px;   /* 角丸でタップしやすく */
  padding:10px 14px;    /* 触りやすい余白 */
  cursor:pointer;       /* ポインタを表示 */
}

/* 暗幕レイヤー（初期は非表示） */
.cp-drawer .layer{
  position:fixed;                 /* 画面全体を覆う */
  inset:0;                        /* top/right/bottom/left 全て 0 */
  background:rgba(2,8,23,.5);     /* 半透明ダーク */
  opacity:0;                      /* 初期は透明 */
  pointer-events:none;            /* クリック不可（非表示扱い） */
  transition:.2s;                 /* フェード速度 */
  z-index:9999;                   /* パネルの背面直下に来るよう高めに */
}

/* data-open="1" で暗幕を表示＆クリック可 */
.cp-drawer[data-open="1"] .layer{
  opacity:1;            /* フェードイン */
  pointer-events:auto;  /* クリックを拾えるようにする（背景クリックで閉じる） */
}

/* ドロワーパネル本体（左からスライドイン） */
.cp-drawer .panel{
  position:fixed;                          /* 画面に固定配置 */
  top:0; left:0;                            /* 左上を起点にする */
  height:100dvh;                            /* 全高（モバイルの動的ビューポート考慮） */
  width:min(86vw,360px);                    /* ビューポートの 86% を上限にしつつ 360px 目安 */
  max-width:420px;                          /* さらに最大幅を制限 */
  background:#fff;                          /* 白背景 */
  color:#0f172a;                            /* テキスト色 */
  transform:translateX(-100%);              /* 初期は画面の左外へ退避 */
  transition:transform .24s ease-out;       /* スライドアニメーション */
  border-right:1px solid #e5e7eb;           /* 右端に薄いボーダー */
  box-shadow:6px 0 20px rgba(2,8,23,.15);   /* 右方向へ落ちる影で浮かせる */
  z-index:10000;                            /* 暗幕より前面 */
  display:flex; flex-direction:column;      /* 中身は縦並び */
}

/* data-open="1" で画面内へスライドイン */
.cp-drawer[data-open="1"] .panel{
  transform:translateX(0);
}

/* パネル内ヘッダー（タイトル＋閉じるボタン） */
.cp-drawer .panel header{
  display:flex; align-items:center; justify-content:space-between; /* 横並び配置 */
  padding:14px 16px;                       /* 内側余白 */
  border-bottom:1px solid #e5e7eb;         /* 下罫線で区切り */
  background:#fff;                         /* 背景透け防止 */
  z-index:1;
}

/* 見出しの体裁（リセット＋最小サイズ） */
.cp-drawer .panel header h3{
  font-size:16px;
  margin:0;
}

/* 閉じるボタンの見た目（控えめ） */
.cp-drawer .panel .close{
  appearance:none; background:#fff;
  border:1px solid #e5e7eb; border-radius:10px;
  padding:6px 10px; cursor:pointer;
}

/* ナビ領域の外側余白 */
.cp-drawer nav{ padding:10px 12px }

/* ナビリンク（大きめタップ領域） */
.cp-drawer nav a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:#0f172a;
  text-decoration:none;
}

/* ホバー背景で可読性と選択性を上げる */
.cp-drawer nav a:hover{ background:#f8fafc }

/* アクセシビリティ：フォーカスリングを明示 */
.cp-drawer .btn:focus,
.cp-drawer .close:focus,
.cp-drawer .panel:focus{
  outline:2px solid #93c5fd;   /* 水色のアウトライン */
  outline-offset:2px;           /* 要素から少し離して視認性UP */
}

<!-- ドロワー全体のラッパー（この中で UI が完結） -->
<div class="cp-drawer" id="drawer-left">

  <!-- 開くトリガーボタン
       data-open-drawer         : JS が開く処理を紐付けるフック
       aria-haspopup="dialog"   : ボタンがダイアログを開くことを支援技術に通知
       aria-controls="drawer-left-panel" : 連動するパネルの ID -->
  <button class="btn" data-open-drawer aria-haspopup="dialog" aria-controls="drawer-left-panel">
    メニューを開く
  </button>

  <!-- 背景を覆う暗幕（初期は非表示。data-open="1" で有効化） -->
  <div class="layer" aria-hidden="true"></div>

  <!-- ドロワーパネル本体（左）
       role="dialog"                       : ダイアログロール
       aria-modal="true"                   : モーダル（背面操作を論理的に無効化）
       aria-labelledby="drawer-left-title" : タイトル見出しと紐付け
       tabindex="-1"                        : JS で初期フォーカスを当てるため -->
  <aside class="panel" id="drawer-left-panel" role="dialog" aria-modal="true" aria-labelledby="drawer-left-title" tabindex="-1">

    <!-- パネル上部：タイトルと閉じるボタン -->
    <header>
      <h3 id="drawer-left-title">メニュー</h3>
      <button class="close" data-close-drawer aria-label="閉じる">閉じる</button>
    </header>

    <!-- サイト内メニュー想定のリンク群 -->
    <nav aria-label="サイト内メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </aside> <!-- /panel -->

</div> <!-- /cp-drawer -->

(() => {  // 即時実行関数：グローバルスコープ汚染を回避
  const root = document.getElementById('drawer-left');  // このデモのルート
  if(!root) return;                                     // 念のため存在チェック

  // 要素参照
  const layer   = root.querySelector('.layer');               // 暗幕
  const panel   = root.querySelector('.panel');               // パネル本体（初期フォーカス先）
  const openBtn = root.querySelector('[data-open-drawer]');   // 開くボタン
  const closeBtn= root.querySelector('[data-close-drawer]');  // 閉じるボタン

  // ESC キーで閉じる
  function onKey(e){
    if(e.key === 'Escape') close();
  }

  // 開く処理
  function open(){
    root.setAttribute('data-open','1');       // data-open="1" で CSS の表示状態へ
    panel && panel.focus();                   // パネルに初期フォーカス
    document.addEventListener('keydown', onKey);        // ESC 監視開始
    document.documentElement.style.overflow = 'hidden'; // 背景スクロールを止める
  }

  // 閉じる処理
  function close(){
    root.removeAttribute('data-open');        // 非表示に戻す
    document.removeEventListener('keydown', onKey);     // ESC 監視解除
    openBtn && openBtn.focus();               // 開くボタンへフォーカス返却（A11y）
    document.documentElement.style.overflow = '';       // 背景スクロール解除
  }

  // クリック操作の紐付け
  openBtn  && openBtn.addEventListener('click', open);   // 開く
  closeBtn && closeBtn.addEventListener('click', close); // 閉じる

  // 暗幕クリックで閉じる（レイヤー自身が押された時のみ）
  layer && layer.addEventListener('click', (e) => {
    if(e.target === layer) close();
  });

  // （任意）簡易フォーカストラップ：Tab が外へ逃げにくいよう制御
  panel && panel.addEventListener('keydown', (e) => {
    if(e.key !== 'Tab') return;  // Tab だけ拾う
    const focusables = panel.querySelectorAll(
      'a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
    );
    if(!focusables.length) return;
    const first = focusables[0];
    const last  = focusables[focusables.length - 1];

    // 逆方向（Shift+Tab）で先頭からさらに戻ろうとしたら末尾へ
    if(e.shiftKey && document.activeElement === first){
      e.preventDefault();
      last.focus();
    }
    // 順方向（Tab）で末尾からさらに進もうとしたら先頭へ
    else if(!e.shiftKey && document.activeElement === last){
      e.preventDefault();
      first.focus();
    }
  });
})();

/* =========================================================
   右スライド：CSS（詳細コメント付き・そのままコピペ可）
   ========================================================= */

/* 「開く」ボタンの基本スタイル */
.cp-drawer .btn{
  background:#0b6bff;  /* アクセントカラー */
  color:#fff;          /* 白文字 */
  border:none;         /* デフォ枠線なし */
  border-radius:12px;  /* 角丸でタップしやすい */
  padding:10px 14px;   /* クリック領域を確保 */
  cursor:pointer;      /* ポインタ形状 */
}

/* 背景の暗幕（初期は非表示） */
.cp-drawer .layer{
  position:fixed;                /* 画面全体を覆う */
  inset:0;                       /* top/right/bottom/left を 0 に */
  background:rgba(2,8,23,.5);    /* 半透明の暗幕 */
  opacity:0;                     /* 初期は透明 */
  pointer-events:none;           /* クリック不可（実質非表示） */
  transition:.2s;                /* フェードイン/アウト */
  z-index:9999;                  /* パネルの直下に来るよう高めに */
}

/* data-open="1" 時に暗幕をアクティブ化（表示＆クリック可） */
.cp-drawer[data-open="1"] .layer{
  opacity:1;
  pointer-events:auto;
}

/* ドロワーパネル本体（右からスライドイン） */
.cp-drawer .panel{
  position:fixed;                          /* 画面に固定配置 */
  top:0; right:0;                           /* 右上を起点にする */
  height:100dvh;                            /* 動的ビューポート高（モバイル考慮） */
  width:min(86vw,360px);                    /* SP で広がりすぎない幅 */
  max-width:420px;                          /* さらに最大幅を制限 */
  background:#fff;                          /* 白背景 */
  color:#0f172a;                            /* テキスト色 */
  transform:translateX(100%);               /* 初期は画面外（右） */
  transition:transform .24s ease-out;       /* スライド速度とイージング */
  border-left:1px solid #e5e7eb;            /* 左端に薄いボーダー */
  box-shadow:-6px 0 20px rgba(2,8,23,.15);  /* 左向きの影で浮かせる */
  z-index:10000;                            /* 暗幕より前面 */
  display:flex; flex-direction:column;      /* 中身を縦並びに */
}

/* data-open="1" で画面内へスライドイン */
.cp-drawer[data-open="1"] .panel{
  transform:translateX(0);
}

/* パネルヘッダー（タイトル＋閉じる） */
.cp-drawer .panel header{
  display:flex; align-items:center; justify-content:space-between; /* 横並び配置 */
  padding:14px 16px;                        /* 内側余白 */
  border-bottom:1px solid #e5e7eb;          /* 下罫線 */
  background:#fff;                          /* 背景透け防止 */
  z-index:1;
}

/* 見出しの最小体裁 */
.cp-drawer .panel header h3{
  font-size:16px;
  margin:0;
}

/* 閉じるボタン（控えめな見た目） */
.cp-drawer .panel .close{
  appearance:none; background:#fff;
  border:1px solid #e5e7eb; border-radius:10px;
  padding:6px 10px; cursor:pointer;
}

/* ナビ領域 */
.cp-drawer nav{ padding:10px 12px }

/* ナビリンク：タップ領域を大きめに */
.cp-drawer nav a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:#0f172a;
  text-decoration:none;
}

/* ホバー時の薄いハイライト */
.cp-drawer nav a:hover{ background:#f8fafc }

/* アクセシビリティ：フォーカスリングを明示 */
.cp-drawer .btn:focus,
.cp-drawer .close:focus,
.cp-drawer .panel:focus{
  outline:2px solid #93c5fd;   /* 水色アウトライン */
  outline-offset:2px;           /* 要素から少し離す */
}

<!-- ドロワー全体（右スライド版）。この中で UI が完結 -->
<div class="cp-drawer" id="drawer-right">

  <!-- 開くトリガーボタン
       data-open-drawer                : JS が開く処理を付与するフック
       aria-haspopup="dialog"          : このボタンがダイアログを開くことを宣言
       aria-controls="drawer-right-panel" : 対になるパネルの ID -->
  <button class="btn" data-open-drawer aria-haspopup="dialog" aria-controls="drawer-right-panel">
    メニューを開く
  </button>

  <!-- 背景暗幕（初期は非表示。data-open="1" で表示） -->
  <div class="layer" aria-hidden="true"></div>

  <!-- ドロワーパネル本体（右）
       role="dialog"                        : ダイアログロール
       aria-modal="true"                    : モーダル（背面操作を論理的に無効化）
       aria-labelledby="drawer-right-title" : タイトルと関連付け
       tabindex="-1"                         : JS で初期フォーカスを当てるため -->
  <aside class="panel" id="drawer-right-panel" role="dialog" aria-modal="true" aria-labelledby="drawer-right-title" tabindex="-1">

    <!-- タイトル＋閉じるボタン -->
    <header>
      <h3 id="drawer-right-title">メニュー</h3>
      <button class="close" data-close-drawer aria-label="閉じる">閉じる</button>
    </header>

    <!-- サイト内メニューの例 -->
    <nav aria-label="サイト内メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </aside> <!-- /panel -->

</div> <!-- /cp-drawer -->

(() => { // 即時実行関数：スコープ汚染防止
  const root = document.getElementById('drawer-right'); // このデモのルート要素
  if(!root) return;                                      // 念のため存在チェック

  // DOM 参照を取得
  const layer    = root.querySelector('.layer');              // 暗幕レイヤー
  const panel    = root.querySelector('.panel');              // パネル本体（初期フォーカス先）
  const openBtn  = root.querySelector('[data-open-drawer]');  // 「開く」ボタン
  const closeBtn = root.querySelector('[data-close-drawer]'); // 「閉じる」ボタン

  // ESC キーで閉じるためのハンドラ
  function onKey(e){
    if(e.key === 'Escape') close();
  }

  // 開く処理
  function open(){
    root.setAttribute('data-open','1');        // data-open=1 で表示状態へ（CSS が反応）
    panel && panel.focus();                    // 初期フォーカスをパネルに移動
    document.addEventListener('keydown', onKey);// ESC 監視開始
    document.documentElement.style.overflow='hidden'; // 背景スクロールを止める
  }

  // 閉じる処理
  function close(){
    root.removeAttribute('data-open');         // 非表示に戻す
    document.removeEventListener('keydown', onKey);   // ESC 監視解除
    openBtn && openBtn.focus();                // 開くボタンへフォーカス返却（A11y）
    document.documentElement.style.overflow='';       // 背景スクロール解除
  }

  // クリック操作を紐付け
  openBtn  && openBtn.addEventListener('click', open);   // 開く
  closeBtn && closeBtn.addEventListener('click', close); // 閉じる

  // 暗幕クリックで閉じる（自身が押された時のみ反応）
  layer && layer.addEventListener('click', (e) => {
    if(e.target === layer) close();
  });

  // （任意）簡易フォーカストラップ：Tab で外へ抜けにくくする
  panel && panel.addEventListener('keydown', (e) => {
    if(e.key !== 'Tab') return; // Tab 以外は無視
    const f = panel.querySelectorAll(
      'a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'
    );
    if(!f.length) return;
    const first = f[0];
    const last  = f[f.length - 1];

    // Shift+Tab で先頭からさらに戻ろうとしたら末尾へ移す
    if(e.shiftKey && document.activeElement === first){
      e.preventDefault();
      last.focus();
    }
    // Tab で末尾からさらに進もうとしたら先頭へ戻す
    else if(!e.shiftKey && document.activeElement === last){
      e.preventDefault();
      first.focus();
    }
  });
})();