CSSだけでモーダル（ポップアップ）を作る方法｜JavaScript不要のコピペ実装

<!-- モーダルを開くリンク -->
<a href="#modal-sample" class="btn-open">モーダルを開く</a>

<!-- モーダル本体（id が href の # と一致する） -->
<div id="modal-sample" class="modal-overlay">
  <div class="modal-content">
    <h2>モーダルのタイトル</h2>
    <p>ここにコンテンツを書きます。</p>
    <!-- 閉じるリンク（別の ID またはページ外の # を指す） -->
    <a href="#!" class="btn-close">✕ 閉じる</a>
  </div>
</div>

/* ── モーダルの基本構造（:target を使った表示切り替え） ── */

/* 初期状態：非表示 */
.modal-overlay {
  display: none;
}

/* #modal-sample がターゲットになったとき（URLが #modal-sample になったとき）表示 */
.modal-overlay:target {
  display: block;
  position: fixed;
  inset: 0;                    /* top/right/bottom/left を一括指定 */
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}

/* モーダルの中央ボックス */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  width: min(90%, 480px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* 閉じるボタン */
.btn-close {
  display: inline-block;
  margin-top: 1rem;
  color: #555;
  text-decoration: none;
}
.btn-close:hover {
  color: #d16176;
}

<!-- ① 非表示のチェックボックス（id が label の for と一致） -->
<input type="checkbox" id="modal-toggle" class="modal-input" />

<!-- ② 開くボタン（label で #modal-toggle を操作） -->
<label for="modal-toggle" class="btn-open">モーダルを開く</label>

<!-- ③ モーダル本体（input の直後の兄弟要素にする） -->
<div class="modal-overlay">
  <div class="modal-content">
    <h2>モーダルのタイトル</h2>
    <p>ここにコンテンツを書きます。</p>
    <!-- 閉じるボタンも label で同じ input を操作 -->
    <label for="modal-toggle" class="btn-close">✕ 閉じる</label>
  </div>
</div>

/* ── チェックボックスハックによるモーダル切り替え ── */

/* チェックボックス自体は画面に表示しない */
.modal-input {
  display: none;
}

/* 初期状態：モーダル非表示 */
.modal-overlay {
  display: none;
}

/* チェックボックスが :checked のとき、直後の兄弟（.modal-overlay）を表示 */
/* ※ input と .modal-overlay が同じ親の直接の子である必要がある */
.modal-input:checked + .modal-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}

/* モーダルの中央ボックス */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  width: min(90%, 480px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* 開くボタン（label） */
.btn-open {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: #d16176;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

/* 閉じるボタン（label） */
.btn-close {
  display: inline-block;
  margin-top: 1rem;
  color: #555;
  cursor: pointer;
}
.btn-close:hover {
  color: #d16176;
}

/* ── モーダルの見た目を整える共通CSS ── */

/* オーバーレイ（背景の暗幕） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);  /* 半透明の黒 */
  z-index: 1000;
}

/* モーダル本体ボックス */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 正確な中央寄せ */

  background: #fff;
  border-radius: 12px;               /* 角丸 */
  padding: 2rem 2.5rem;
  width: min(90vw, 520px);           /* レスポンシブ対応 */
  max-height: 85vh;                  /* 縦に長いコンテンツは内部スクロール */
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

/* モーダル内の見出し */
.modal-content h2 {
  margin-top: 0;
  font-size: 1.25rem;
  color: #333;
}

/* 閉じるボタン（右上に絶対配置） */
.btn-close-x {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.25rem;
}
.btn-close-x:hover {
  color: #d16176;  /* ブランドカラーでホバー変化 */
}

/* 開くボタン */
.btn-open {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: #d16176;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-size: 1rem;
}
.btn-open:hover {
  background: #b84f63;
}

/* ── opacityとvisibilityを組み合わせたフェードイン・アウト ── */

/* :target 方式の場合（チェックボックスハックは .modal-input:checked + .modal-overlay に読み替える） */

/* 初期状態：透明 + 非インタラクティブ（display:none より柔軟） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1000;

  opacity: 0;
  visibility: hidden;  /* クリックなどを受け付けない */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* :target 状態：フェードインで表示 */
.modal-overlay:target {
  opacity: 1;
  visibility: visible;
}

/* モーダルコンテンツも少し下からスライドして登場 */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);  /* 少し上に位置をずらしておく */
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  width: min(90vw, 520px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);

  transition: transform 0.3s ease;
}

/* :target 時にコンテンツを正位置（中央）に戻す */
.modal-overlay:target .modal-content {
  transform: translate(-50%, -50%);
}