ドロワーメニュー(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); /* 右からスライドイン(画面内へ) */
}
コメント