コピペで完結!ドロワーメニュー#04【HTML+CSSのみ|:targetハック版】

html/css/js

ドロワーメニュー(右から)|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 に
------------------------------------------------------ */

コメント