CSSだけで作れる“ちょっと楽しい”モーダルウィンドウの実装と応用【初心者向けまとめ】

モーダルウィンドウは、JavaScriptが必須だと思っていませんか?
実は CSS だけで実装できてしまいます。

今回は、JavaScriptを一切使わず、HTML と CSS だけでモーダルウィンドウを
作る方法と、知ると“ちょっと楽しい”応用を解説します。

HTML の仕組み

ポイントは :target 疑似クラスにあります。URLのハッシュ値（#modal など）にマッチする ID を持つ要素に対してスタイルを適用できます。

<!-- モーダルを開くトリガー -->
<a href="#modal">モーダルを開く</a>

<!-- モーダルウィンドウ -->
<div id="modal" class="modal">
  <div class="modal-content">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <h2>モーダルタイトル</h2>
    <p>モーダルの内容がここに入ります。</p>
  </div>
</div>

閉じるリンクには href="#" を使っていますが、ページ先頭にスクロールして
しまう場合があります。（ブラウザによって挙動が異なります）
href="#!" や href="#close" などの存在しないIDを使うとスクロールを防げます。

CSSだけではフォーカス制御やキーボード操作への対応が難しいため、
アクセシビリティが重要な場面では JavaScript も併用することを推奨します。

CSS の実装

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

/* :target で モーダル を表示 */
.modal:target {
  display: block;
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.close:hover,
.close:focus {
  color: black;
}

動作の仕組み

ユーザーが「モーダルを開く」リンクをクリック
URL が #modal に変わる
CSS の :target が反応して .modal:target が有効になる
モーダルが表示される
「×」ボタンをクリックすると URL が # に戻る
:target が無効になってモーダルが非表示になる

モーダルウィンドウの様々な応用

1.複数のモーダルに対応

複数のモーダルを作ることもできます。

<a href="#modal1">モーダル1を開く</a>
<a href="#modal2">モーダル2を開く</a>

<div id="modal1" class="modal">
  <div class="modal-content">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <h2>モーダル1</h2>
    <p>モーダルの内容がここに入ります。1</p>
  </div>
</div>

<div id="modal2" class="modal">
  <div class="modal-content">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <h2>モーダル2</h2>
    <p>モーダルの内容がここに入ります。2</p>
  </div>
</div>

CSS は同じものを使用します。ID が異なるだけで、:target で個別に制御できます。

2.アニメーションで動かす

モーダル表示にちょっとした演出を加えられます。
ここではフェードイン＋ズームのアニメーションを追加した例を紹介します。

<a href="#modal-zoom">ズームモーダルを開く</a>

<div id="modal-zoom" class="modal">
  <div class="modal-content zoom">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <h2>ズームモーダル</h2>
    <p>CSSだけでアニメーション付きモーダルが作れます。</p>
  </div>
</div>

CSS追加差分↓

/* ズームアニメーション */
.modal-content.zoom {
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

transform: scale() を使うだけで簡単にポップな動きが作れる
既存の .modal-content にクラスを追加するだけで使い回せる

3.「画像ビューア」として使う

CSS モーダルは、画像ギャラリーの拡大表示にも応用できます。
クリックした画像をそのままモーダルで大きく見せる仕組みです。

<!-- サムネイル -->
<a href="#img1"><img src="sample1.jpg" alt="画像1" class="thumb"></a>
<a href="#img2"><img src="sample2.jpg" alt="画像2" class="thumb"></a>

<!-- モーダル1 -->
<div id="img1" class="modal">
  <div class="modal-content img-view">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <img src="sample1.jpg" alt="画像1" class="large">
  </div>
</div>

<!-- モーダル2 -->
<div id="img2" class="modal">
  <div class="modal-content img-view">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <img src="sample2.jpg" alt="画像2" class="large">
  </div>
</div>

CSS追加差分↓

.thumb {
  width: 120px;
  cursor: pointer;
  border-radius: 4px;
}

.img-view {
  padding: 0;
  background: none;
  border: none;
}

.large {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

サムネイルをクリック → モーダルで拡大表示
.modal-content の背景や余白を消すことで“画像ビューア風”に

4.「ステップ式チュートリアル」として使う

モーダルを連続させることで、
「次へ → 次へ → 完了」のようなチュートリアル風UIが作れます。

<a href="#step1">チュートリアルを開始</a>

<!-- STEP 1 -->
<div id="step1" class="modal">
  <div class="modal-content">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <h2>ステップ1</h2>
    <p>ここでは基本操作を説明します。</p>
    <a href="#step2" class="next">次へ →</a>
  </div>
</div>

<!-- STEP 2 -->
<div id="step2" class="modal">
  <div class="modal-content">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <h2>ステップ2</h2>
    <p>次に、応用操作を見てみましょう。</p>
    <a href="#step3" class="next">次へ →</a>
  </div>
</div>

<!-- STEP 3 -->
<div id="step3" class="modal">
  <div class="modal-content">
    <a href="#" class="close" aria-label="閉じる">×</a>
    <h2>ステップ3（完了）</h2>
    <p>これでチュートリアルは終了です！</p>
    <a href="#" class="next">閉じる</a>
  </div>
</div>

CSS追加差分↓

.next {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 16px;
  background: #0078ff;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.next:hover {
  background: #005fcc;
}

#step1 → #step2 → #step3 とハッシュを順番に切り替えるだけ
各ステップがモーダルとして表示される
JavaScriptなしで“ウィザード形式”が作れる

注意点とデメリット

戻るボタンでモーダルが閉じる

:target はURLのハッシュを使うためブラウザの戻るボタンを押すと、
URL が変わってモーダルが閉じてしまいます。

履歴に残る

モーダルを開くたびに /#modal のような URL が履歴に追加されます。

SEOに影響する可能性

モーダル内のコンテンツがハッシュ付きで認識されるため、
ハッシュ付きURL（例：/#modal）がインデックスされる可能性があります。

通常の静的サイトでは大きな問題になることは少ないですが、
モーダル内に重要なコンテンツを置く場合は注意が必要です。

こんな時に活躍

シンプルな確認ダイアログ
重い JavaScript ライブラリを避けたい時
プロトタイピング段階
静的サイト
JavaScriptが使えない環境（AMPページなど）

まとめ

CSS だけでも、モーダルは「見せ方」や「用途」を自由に広げられます。
JavaScript を使わない軽量な UI として、静的サイトでも大活躍するはずです！