コピペで完結！モーダルウインドウ#11【CSS＋HTMLのみで複数モーダルを切替】

html/css/js

CSS＋HTMLのみで複数モーダルを切替

ボタンごとに別々のモーダルを切替表示できるサンプルです。
今回は CSS＋HTMLのみ の仕組みで開閉できるため、JavaScriptは不要。
背景クリックや閉じるボタンでもモーダルを閉じられる仕様です。

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

デモ

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

/* ========== 複数モーダル切替用 CSS（HTML＋CSSのみで動作） ========== */

/* ▼デモ全体を囲むセクション */
#demo-section.demo-wrap{
  max-width: 960px;              /* コンテンツの横幅上限を 960px に制限 */
  margin: 0 auto;                /* 中央寄せ（左右マージン自動） */
  padding: 0 16px;               /* 左右に16pxの余白を設定 */
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Yu Gothic UI",sans-serif; /* 読みやすいフォント指定 */
  color: #0f172a;                /* 基本文字色（濃いネイビー系） */
  --accent:#0b6bff;              /* カスタムプロパティ：アクセントカラー（青） */
}

/* ▼見出しデザイン */
#demo-section h2{
  font-size: clamp(18px,2.6vw,24px); /* 画面幅に応じて自動調整するフォントサイズ */
  margin: 28px 0 10px;               /* 上 28px／下 10px の余白 */
}

/* ▼ボタン群（開くボタンの横並び） */
#demo-section .btns{
  display:flex;      /* 横並びにする */
  gap:12px;          /* ボタン同士の間隔 */
  margin:16px 0;     /* 上下の余白 */
}

/* ▼モーダルを開くボタン（実体は label 要素） */
#demo-section .btn{
  display:inline-block;             /* インライン要素でもブロック扱いにする */
  padding:8px 14px;                 /* ボタン内余白 */
  border-radius:8px;                /* 角を丸くする */
  border:1px solid var(--accent);   /* 枠線をアクセントカラーで指定 */
  background:#fff;                  /* 背景は白 */
  color:var(--accent);              /* 文字はアクセントカラー */
  cursor:pointer;                   /* ホバー時にポインタ表示 */
  user-select:none;                 /* テキスト選択を無効化 */
}
/* ▼ホバー時は色を反転 */
#demo-section .btn:hover{ 
  background:var(--accent); 
  color:#fff; 
}

/* ▼チェックボックス（トグル）は視覚的に隠す */
#demo-section .toggle{
  position:absolute;        /* ページに影響しない絶対配置 */
  inline-size:1px;          /* 幅を1pxに縮小 */
  block-size:1px;           /* 高さも1pxに縮小 */
  margin:-1px;              /* 余白を -1px にして画面外へ */
  padding:0; border:0;      /* 余白と枠をリセット */
  clip:rect(0 0 0 0);       /* 古いブラウザ向けクリッピング */
  clip-path:inset(50%);     /* 新しいブラウザ向けクリッピング */
  overflow:hidden;          /* 内容は非表示 */
  white-space:nowrap;       /* 折り返し禁止 */
}

/* ▼モーダルの背景（黒いオーバーレイ） */
#demo-section .overlay{
  position:fixed;           /* 画面全体に固定配置 */
  inset:0;                  /* top/right/bottom/left = 0 で全画面を覆う */
  background:rgba(0,0,0,.55); /* 半透明の黒背景 */
  display:none;             /* 初期は非表示 */
  place-items:center;       /* 中央寄せ（Gridの機能） */
  z-index:9999;             /* 最前面に配置 */
}

/* ▼チェックがONのとき、直後の.overlayだけを表示 */
#demo-section .toggle:checked + .overlay{ 
  display:grid; 
}

/* ▼背景クリック領域（閉じる用の透明label） */
#demo-section .bg{
  position:fixed;   /* 画面全体を覆う */
  inset:0;          /* 全領域をカバー */
  display:block;    /* クリック可能にする */
}

/* ▼モーダルのダイアログ本体 */
#demo-section .dialog{
  position:relative; z-index:1; /* 背景ラベルより前面に表示 */
  background:#fff;              /* 背景は白 */
  padding:20px;                 /* 内側余白 */
  border-radius:12px;           /* 角丸 */
  max-width:420px;              /* 最大幅420px */
  width:90%;                    /* 画面幅に応じて90%に縮む */
  box-shadow:0 20px 40px rgba(0,0,0,.25); /* 影を付与 */
}

/* ▼閉じるボタン（実体は label） */
#demo-section .close-btn{
  display:inline-block;          /* インライン要素をブロック扱い */
  margin-top:12px;               /* 上に余白 */
  padding:6px 12px;              /* 内側余白 */
  border:none;                   /* 枠線なし */
  border-radius:6px;             /* 角丸 */
  background:var(--accent);      /* 背景はアクセントカラー */
  color:#fff;                    /* 文字は白 */
  cursor:pointer;                /* ポインタ表示 */
  user-select:none;              /* 選択禁止 */
}

コメント