ドロワーメニュー(右から)|HTML+CSSのみ(:target
ハック)
右からスライドする「ドロワーメニュー」を、HTML と CSS だけで実装します。JavaScript を使わず、:target
によるページ内遷移を利用して開閉します。下の「デモ」はそのまま動作し、続くタブからコピー用のコード(CSS→HTML)を入手できます。
コードについて
本記事のコードは AI(ChatGPT)による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。
デモ
コードをコピーして使おう!
/* =========================================================
:target ハックで実装する右ドロワーメニュー(CSSのみ)
- JavaScript不要:URLフラグメント一致(:target)で開閉
- 閉じる操作:href="#" でターゲット解除
- 簡易アクセシビリティ:dialog相当領域は tabindex でフォーカス可
========================================================= */
/* ボタン(メニュー開くトリガー。見た目調整用) */
.cp-drawer .btn{
background:#0b6bff; /* 強調色:青 */
color:#fff; /* 文字色:白 */
border:none; /* 枠線なし */
border-radius:12px; /* 角丸 */
padding:10px 14px; /* 内側余白 */
cursor:pointer; /* マウスポインタを指マークに */
text-decoration:none; /* a要素でも下線を消す */
display:inline-block; /* サイズ適用のためインラインブロック */
}
/* ターゲットを包むコンテナ(スコープ用。空でもOK) */
.cp-drawer .target-wrap{
display:block; /* 空ブロック警告を避ける */
}
/* 背景レイヤー(暗幕。クリックで閉じるための a 要素推奨) */
.cp-drawer .layer{
position:fixed; /* 画面全体を覆う */
inset:0; /* top/right/bottom/left:0 */
background:rgba(2,8,23,.5); /* 半透明の黒幕 */
opacity:0; /* 初期は非表示 */
pointer-events:none; /* 初期はクリック無効 */
transition:.24s; /* フェード効果 */
}
/* パネル本体(右側からスライドイン) */
.cp-drawer .panel{
position:fixed;
top:0; /* 上端に固定 */
right:0; /* 右端に配置 */
height:100dvh; /* 端末UI対応の100%高 */
width:min(86vw,360px);/* 画面幅の86%か360pxまで */
background:#fff; /* 背景白 */
color:#0f172a; /* テキスト濃紺 */
border-left:1px solid #e5e7eb; /* 区切り線 */
box-shadow:-6px 0 20px rgba(2,8,23,.15); /* 影 */
transform:translateX(100%); /* 初期は画面外 */
transition:.24s ease-out; /* スライドアニメーション */
display:flex; /* 縦配置のflex */
flex-direction:column;
}
/* ヘッダー(タイトル+閉じる) */
.cp-drawer .panel header{
display:flex; /* 横並び配置 */
align-items:center; /* 縦中央揃え */
justify-content:space-between; /* 左右両端配置 */
padding:14px 16px; /* 余白 */
border-bottom:1px solid #e5e7eb;/* 下境界線 */
}
/* タイトル文字 */
.cp-drawer .panel h3{
font-size:16px; /* 基本サイズ */
margin:0; /* デフォルト余白をリセット */
}
/* 閉じるリンク(右上ボタン) */
.cp-drawer .panel .close{
font-size:12px; /* 小さめ文字 */
color:#0b6bff; /* 強調色 */
text-decoration:none; /* 下線なし */
}
/* ナビゲーション領域 */
.cp-drawer nav{
display:grid; /* 縦リストを gap 管理 */
gap:8px; /* 各リンク間の余白 */
padding:16px; /* 内側余白 */
}
/* ナビゲーションのリンク */
.cp-drawer nav a{
display:block; /* 全幅タップ領域 */
padding:10px 12px; /* 押しやすい余白 */
border-radius:10px; /* 角丸 */
border:1px solid #e5e7eb; /* 薄い枠線 */
color:#0f172a; /* テキスト色 */
text-decoration:none; /* 下線なし */
}
/* ナビリンク:ホバー時 */
.cp-drawer nav a:hover{
background:#f8fafc; /* 薄灰色で反応 */
}
/* アクセシビリティ補足:
キーボード操作での可視フォーカスを追加すると良い */
.cp-drawer nav a:focus-visible{
outline:2px solid #0b6bff;
outline-offset:2px;
}
/* ========== 開閉のコア(:target適用時) ========== */
#drawer-right:target .layer{
opacity:1; /* 暗幕表示 */
pointer-events:auto; /* クリック可 */
}
#drawer-right:target .panel{
transform:translateX(0);/* 右からスライドイン */
}
/* --- 応用:上下左右版 --------------------------------
左: right→left, transform:translateX(-100%)
上: top固定, transform:translateY(-100%)
下: bottom固定, transform:translateY(100%)
target時はいずれも translate を 0 に
------------------------------------------------------ */
コメント