6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@suzukielecs(RAITO)inエレクス株式会社

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

Posted at

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;
}

動作の仕組み

  1. ユーザーが「モーダルを開く」リンクをクリック
  2. URL が #modal に変わる
  3. CSS の :target が反応して .modal:target が有効になる
  4. モーダルが表示される
  5. 「×」ボタンをクリックすると URL が # に戻る
  6. :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 として、静的サイトでも大活躍するはずです！

6
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?