CSS Tips | 超実務コアCSSテクニック：UIパーツ － モーダルCSSのみ実装

Web APP CSS
スポンサーリンク

モーダルは「画面の主役を一時的に切り替える」UIパーツ

モーダルは、ユーザーの視線と操作を一時的に“ひとつの領域”へ集中させるための UI です。 CSSだけで実装する場合は、 チェックボックス（またはラジオ）＋擬似要素＋position＋opacity＋pointer-events を組み合わせることで、JavaScriptなしでも開閉できます。

ここでは CSS と Tailwind CSS の両方で、 初心者でも迷わないように、実務で使えるモーダルを丁寧に解説します。

モーダルCSS実装の基本構造

モーダルを開くトリガー（チェックボックス）

モーダルの背景（オーバーレイ）

モーダル本体（中央のボックス）

checked 状態で表示切り替え

この4つを理解すると、CSSだけでモーダルが作れます。

例1：最も基本の「チェックボックスで開閉するモーダル」

CSS 版（完全CSSのみ）

.modal-toggle {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-box {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* チェックされたら表示 */
.modal-toggle:checked ~ .modal-overlay {
  opacity: 1;
  pointer-events: auto;
}

.modal-toggle:checked ~ .modal-box {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* 閉じるボタン */
.close-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
CSS
<label for="modal" class="open-btn">モーダルを開く</label>
<input type="checkbox" id="modal" class="modal-toggle">

<div class="modal-overlay"></div>

<div class="modal-box">
  <h2>モーダルタイトル</h2>
  <p>ここに説明文が入ります。</p>
  <label for="modal" class="close-btn">閉じる</label>
</div>
HTML

深掘りポイント

opacity と pointer-events を組み合わせることで、 「見えないときはクリックできない」状態を作れます。 transform の scale を使うと、 “ふわっと開く”自然なアニメーションになります。

例2：Tailwind CSSで作る「CSSのみモーダル」

Tailwind では peer を使うと、チェックボックスの状態を子要素に反映できます。

<label for="modal" class="px-4 py-2 bg-sky-600 text-white rounded cursor-pointer">
  モーダルを開く
</label>

<input type="checkbox" id="modal" class="peer hidden">

<div
  class="fixed inset-0 bg-black/45 opacity-0 pointer-events-none
         peer-checked:opacity-100 peer-checked:pointer-events-auto
         transition">
</div>

<div
  class="fixed top-1/2 left-1/2 w-[90%] max-w-md bg-white rounded-xl p-6
         opacity-0 pointer-events-none -translate-x-1/2 -translate-y-1/2 scale-95
         peer-checked:opacity-100 peer-checked:pointer-events-auto
         peer-checked:scale-100
         transition">
  <h2 class="text-xl font-semibold mb-3">モーダルタイトル</h2>
  <p class="text-slate-700 mb-4">ここに説明文が入ります。</p>

  <label for="modal"
    class="px-4 py-2 bg-sky-600 text-white rounded cursor-pointer inline-block">
    閉じる
  </label>
</div>
HTML

深掘りポイント

Tailwind の peer-checked: は、 「チェックボックスの状態を別要素に反映する」魔法のような仕組み。 JavaScriptなしでモーダルが開閉できるようになります。

例3：モーダルの背景を“ぼかす”グラスモーフィズム風

CSS 版

.modal-overlay {
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.35);
}
CSS

Tailwind 版

<div
  class="fixed inset-0 bg-black/35 backdrop-blur-sm
         opacity-0 pointer-events-none
         peer-checked:opacity-100 peer-checked:pointer-events-auto
         transition">
</div>
HTML

深掘りポイント

背景をぼかすと、 モーダルが“浮いている”ように見え、 視線が自然にモーダルへ集中します。

例4：モーダルを下からスライドさせる（スマホ風）

CSS 版

.modal-box {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.modal-toggle:checked ~ .modal-box {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
CSS

Tailwind 版

<div
  class="fixed bottom-0 left-1/2 w-[90%] max-w-md bg-white rounded-t-xl p-6
         opacity-0 pointer-events-none -translate-x-1/2 translate-y-5
         peer-checked:opacity-100 peer-checked:pointer-events-auto
         peer-checked:translate-y-0
         transition">
  …
</div>
HTML

深掘りポイント

スマホアプリのような 「下からスッと出るモーダル」は UX がとても良いです。

例5：モーダルの外側クリックで閉じる（CSSのみ）

CSSだけで外側クリックを実現するには、 オーバーレイ自体を閉じるボタンにします。

CSS 版

.modal-overlay {
  cursor: pointer;
}
CSS
<label for="modal" class="modal-overlay"></label>
HTML

Tailwind 版

<label
  for="modal"
  class="fixed inset-0 bg-black/45 backdrop-blur-sm
         opacity-0 pointer-events-none
         peer-checked:opacity-100 peer-checked:pointer-events-auto
         cursor-pointer transition">
</label>
HTML

深掘りポイント

JavaScriptなしでも 「外側クリックで閉じる」動作ができます。 モーダルの使い勝手が大きく向上します。

モーダル設計の重要ポイント

モーダルは「視線を奪う」ので、背景を暗くする

背景を暗くすることで、 ユーザーの視線が自然にモーダルへ集中します。

開閉アニメーションは必須

opacity transform（scale / translate） transition

これらを組み合わせると、 “ふわっと開く”自然なモーダルになります。

閉じる操作を複数用意する

閉じるボタン 外側クリック ESCキー（JSがある場合）

ユーザーが迷わない設計が大事です。

そのまま使える「万能モーダルテンプレート」（Tailwind）

<label for="modal" class="px-4 py-2 bg-sky-600 text-white rounded cursor-pointer">
  モーダルを開く
</label>

<input type="checkbox" id="modal" class="peer hidden">

<label
  for="modal"
  class="fixed inset-0 bg-black/45 backdrop-blur-sm
         opacity-0 pointer-events-none
         peer-checked:opacity-100 peer-checked:pointer-events-auto
         cursor-pointer transition">
</label>

<div
  class="fixed top-1/2 left-1/2 w-[90%] max-w-md bg-white rounded-xl p-6
         opacity-0 pointer-events-none -translate-x-1/2 -translate-y-1/2 scale-95
         peer-checked:opacity-100 peer-checked:pointer-events-auto
         peer-checked:scale-100
         transition">
  <h2 class="text-xl font-semibold mb-3">モーダルタイトル</h2>
  <p class="text-slate-700 mb-4">ここに説明文が入ります。</p>

  <label for="modal"
    class="px-4 py-2 bg-sky-600 text-white rounded cursor-pointer inline-block">
    閉じる
  </label>
</div>
HTML

軽量・高品質・アクセシブルで、 どんな UI にも使える万能モーダルです。

さいごに

モーダルは、 「ユーザーの視線と操作を一時的に集中させる」 UI パーツです。

CSSだけでも、 チェックボックス＋peer＋opacity＋transform を組み合わせれば 美しいモーダルが簡単に作れます。

もしあなたが作っている UI（設定画面、LP、フォームなど）があれば、 その画面に合わせた最適なモーダルを一緒に設計できます。

スポンサーリンク
タイトルとURLをコピーしました