コピペで完結!ドロワーメニュー#03【HTML+CSSのみ|チェックボックスハック版】

html/css/js

ドロワーメニュー(HTML+CSSのみ|チェックボックスハック版)

本記事ではJavaScriptを一切使わずinput[type="checkbox"]:checkedを活用したチェックボックスハックで、右からスライド表示するドロワーメニューを実装します。
開閉は<label for="トグルID">クリックでON/OFFし、:checked ~ .layer / .panelをCSSだけで切り替え。暗幕クリック&「閉じる」もlabelで完結します。

コードについて 本記事のコードは AI(ChatGPT)による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ(右から出てくる・JS不要)

コードをコピーして使おう!

/* =========================================================
   右から出てくるドロワーメニュー(CSSのみ・JS不要)
   - ポイント:
     * 隠しチェックボックス(.toggle)の :checked 状態を利用して開閉
     * 右からスライドインする挙動を transform で制御
     * セレクタは #drawer-right-1 配下だけに作用 → 他の場所と衝突しにくい
   ========================================================= */

/* 1) 開くボタン(見た目の基本スタイル)
   - 背景色はアクセントブルー
   - 白文字、角丸、カーソルをポインタにして押せるUIに */
#drawer-right-1 .btn{
  background:#0b6bff;   /* ボタンの背景色(青系) */
  color:#fff;           /* テキストは白 */
  border:none;          /* デフォルトの枠線は消す */
  border-radius:12px;   /* 角を丸くして押しやすく */
  padding:10px 14px;    /* 内側の余白(タップ領域を広げる) */
  cursor:pointer;       /* ホバーでポインタを表示 */
}

/* 2) 暗幕レイヤー
   - position:fixed で画面全体を覆う
   - 初期状態は透明かつクリック無効(pointer-events:none) */
#drawer-right-1 .layer{
  position:fixed;            /* 画面に固定配置 */
  inset:0;                   /* 上下左右を0にして全画面に広げる */
  background:rgba(2,8,23,.5);/* 半透明の黒いオーバーレイ */
  opacity:0;                 /* 初期は見えない */
  pointer-events:none;       /* 初期はクリックできない(背面透過) */
  transition:opacity .24s;   /* フェードイン/アウトのアニメーション */
}

/* 3) 本体パネル
   - 右端に固定
   - 初期は transform:translateX(100%) で画面外に退避
   - flexで縦方向レイアウト */
#drawer-right-1 .panel{
  position:fixed;              /* ビューポートに固定配置 */
  top:0; right:0;              /* 右上を基準に出現 */
  height:100dvh;               /* 高さは画面全体(動的vh対応) */
  width:min(86vw,360px);       /* 横幅は画面幅の86%か360pxの小さい方 */
  max-width:420px;             /* 最大幅を制限(大画面対策) */
  background:#fff;             /* 背景は白 */
  color:#0f172a;               /* テキスト色は濃いグレー */
  border-left:1px solid #e5e7eb;/* 左端に境界線 */
  box-shadow:-6px 0 20px rgba(2,8,23,.15); /* 左方向に影を落とす */
  transform:translateX(100%);  /* ← 初期は画面の右外へ退避 */
  transition:transform .24s ease-out; /* 開閉時のスライドアニメーション */
  display:flex;                /* フレックスボックス */
  flex-direction:column;       /* 縦方向に並べる(ヘッダー→本文) */
}

/* 4) パネルヘッダー
   - タイトルと閉じるボタンを横並び
   - 下に境界線
   - スクロールしても上部に固定(sticky) */
#drawer-right-1 .panel header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb; /* 下線で区切る */
  background:#fff;                 /* 背景は白で固定 */
  position:sticky; top:0; z-index:1;/* 上に固定配置、重なり順を上げる */
}

/* ヘッダー内のタイトル(h3) */
#drawer-right-1 .panel header h3{
  margin:0; font-size:16px; /* デフォルトの余白を消し、サイズ調整 */
}

/* 閉じるボタン
   - label要素に見た目を与えてボタン風にする */
#drawer-right-1 .panel .close{
  appearance:none;              /* ブラウザ標準スタイルを消す */
  background:#fff;              /* 背景白 */
  border:1px solid #e5e7eb;     /* 薄い枠線 */
  border-radius:10px;           /* 角丸 */
  padding:6px 10px;             /* 内側余白 */
  cursor:pointer;               /* ホバーでポインタ表示 */
}

/* 5) コンテンツ(ナビゲーション部分)
   - 内側余白を設定
   - リンクはブロック表示+パディングで押しやすく */
#drawer-right-1 nav{
  padding:10px 12px;
}
#drawer-right-1 nav a{
  display:block;                 /* 横幅いっぱいのクリック領域 */
  padding:10px 12px;             /* 余白を追加してタップしやすく */
  border-radius:10px;            /* 角丸 */
  color:#0f172a;                 /* 文字色 */
  text-decoration:none;          /* 下線を消す */
}
/* ホバー時は背景を淡いグレーにしてハイライト */
#drawer-right-1 nav a:hover{
  background:#f8fafc;
}

/* 6) フォーカスリング(アクセシビリティ対応)
   - キーボード操作時に視覚的にフォーカスを見せる */
#drawer-right-1 .btn:focus,
#drawer-right-1 .panel:focus,
#drawer-right-1 .close:focus{
  outline:2px solid #93c5fd;   /* 青系のフォーカスリング */
  outline-offset:2px;          /* 要素から少し外側に描画 */
}

/* 7) チェックONで開く状態
   - .toggle:checked をCSSで拾い、暗幕とパネルを切り替える */
#drawer-right-1 .toggle:checked ~ .layer{
  opacity:1; pointer-events:auto; /* 暗幕を表示&クリック可能に */
}
#drawer-right-1 .toggle:checked ~ .panel{
  transform:translateX(0);        /* 右からスライドイン(画面内へ) */
}

コメント