HTML/CSSだけで複数モーダルウインドウを切り替えて表示する方法【HTML/CSS・サンプルコード付き】

html/css/js
2025.09.23

HTML/CSSだけで複数モーダルウインドウを切り替えて表示する方法

HTMLとCSSだけを使って、複数のモーダルウインドウを切り替えて表示する方法を紹介します。このサンプルでは、JavaScriptを使わずに3つのモーダルを切り替えて表示でき、閉じる操作や背景クリックにも対応しています。シンプルなWebページや軽量なUIを作成したい場合や、JavaScriptを使わずにモーダルを実装したい場合に便利です。

関連記事：
・複数モーダルウインドウを切り替えて表示する方法
・スクロール位置で自動表示するモーダルウインドウの作り方
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

HTML/CSSだけで複数モーダルを切替

3つのボタンから、それぞれ異なるモーダルウインドウを表示できます。

お知らせモーダル

これは1つ目のモーダルです。お知らせや案内文を表示する用途に使えます。

確認モーダル

これは2つ目のモーダルです。確認画面や注意喚起を表示する用途に使えます。

詳細情報モーダル

これは3つ目のモーダルです。詳細情報や補足説明を表示する用途に使えます。

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

<!DOCTYPE html>
<html lang="ja">
<head>

  <meta charset="UTF-8">

  <!-- ページタイトル -->
  <title>HTML/CSSだけで複数モーダルウインドウを切替</title>

  <!-- CSS読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- デモエリア -->
  <div class="html-css-multiple-modal-switch_wrap">

    <div class="html-css-multiple-modal-switch_title">
      HTML/CSSだけで複数モーダルを切替
    </div>

    <p class="html-css-multiple-modal-switch_text">
      3つのボタンから、それぞれ異なるモーダルウインドウを表示できます。
    </p>

    <div class="html-css-multiple-modal-switch_buttons">

      <!-- 1つ目のモーダルを開くボタン -->
      <label for="html-css-modal-1" class="html-css-multiple-modal-switch_open">
        お知らせを開く
      </label>

      <!-- 2つ目のモーダルを開くボタン -->
      <label for="html-css-modal-2" class="html-css-multiple-modal-switch_open">
        確認画面を開く
      </label>

      <!-- 3つ目のモーダルを開くボタン -->
      <label for="html-css-modal-3" class="html-css-multiple-modal-switch_open">
        詳細情報を開く
      </label>

    </div>

  </div>

  <!-- モーダルを閉じた状態にするラジオボタン -->
  <input type="radio" name="html-css-modal-switch" id="html-css-modal-close" class="html-css-multiple-modal-switch_check" checked>

  <!-- 1つ目のモーダルを表示するラジオボタン -->
  <input type="radio" name="html-css-modal-switch" id="html-css-modal-1" class="html-css-multiple-modal-switch_check">

  <!-- 2つ目のモーダルを表示するラジオボタン -->
  <input type="radio" name="html-css-modal-switch" id="html-css-modal-2" class="html-css-multiple-modal-switch_check">

  <!-- 3つ目のモーダルを表示するラジオボタン -->
  <input type="radio" name="html-css-modal-switch" id="html-css-modal-3" class="html-css-multiple-modal-switch_check">

  <!-- モーダル全体 -->
  <div class="html-css-multiple-modal-switch_overlay">

    <!-- 背景クリックで閉じる -->
    <label for="html-css-modal-close" class="html-css-multiple-modal-switch_background"></label>

    <!-- 1つ目のモーダル -->
    <div class="html-css-multiple-modal-switch_modal html-css-multiple-modal-switch_modal-1">

      <div class="html-css-multiple-modal-switch_modal-title">
        お知らせモーダル
      </div>

      <p class="html-css-multiple-modal-switch_modal-text">
        これは1つ目のモーダルです。お知らせや案内文を表示する用途に使えます。
      </p>

      <label for="html-css-modal-close" class="html-css-multiple-modal-switch_close">
        閉じる
      </label>

    </div>

    <!-- 2つ目のモーダル -->
    <div class="html-css-multiple-modal-switch_modal html-css-multiple-modal-switch_modal-2">

      <div class="html-css-multiple-modal-switch_modal-title">
        確認モーダル
      </div>

      <p class="html-css-multiple-modal-switch_modal-text">
        これは2つ目のモーダルです。確認画面や注意喚起を表示する用途に使えます。
      </p>

      <label for="html-css-modal-close" class="html-css-multiple-modal-switch_close">
        閉じる
      </label>

    </div>

    <!-- 3つ目のモーダル -->
    <div class="html-css-multiple-modal-switch_modal html-css-multiple-modal-switch_modal-3">

      <div class="html-css-multiple-modal-switch_modal-title">
        詳細情報モーダル
      </div>

      <p class="html-css-multiple-modal-switch_modal-text">
        これは3つ目のモーダルです。詳細情報や補足説明を表示する用途に使えます。
      </p>

      <label for="html-css-modal-close" class="html-css-multiple-modal-switch_close">
        閉じる
      </label>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLファイルとCSSファイルのみで動作します。JavaScriptは使用しないため、index.html と style.css を同じフォルダに配置してください。 

sample/
├── index.html
└── style.css

index.html をブラウザで開くと、3つのボタンからそれぞれ異なるモーダルウインドウを切り替えて表示できます。ラジオボタンとCSSの :checked を使って表示を切り替えているため、JavaScriptなしで動作します。

コメント