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

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

HTML/CSSだけで複数モーダルウインドウを切り替えて表示する方法を紹介します。横並びに配置した3つのボタンから、それぞれ異なる内容のモーダルウインドウを表示できるサンプルです。JavaScriptを使用せず、HTMLのラジオボタンとlabel要素、CSSの:checkedを組み合わせて表示を切り替えます。

このサンプルでは「お知らせ」「確認画面」「詳細情報」の3つのボタンを用意しています。クリックしたボタンに対応するモーダルだけが表示され、背景または「閉じる」ボタンをクリックすると元の画面へ戻ります。アンカーリンクを使用しないため、モーダルを閉じてもページ先頭へ移動せず、開く前のスクロール位置を維持できます。

管理画面の案内、会員サイトの確認画面、ECサイトの商品説明、サービス紹介など、同じページ内で複数の情報を個別に表示したい場面に利用できます。ボタン名、モーダルタイトル、説明文、背景色、ボタン色、横幅などはHTMLとCSSで変更できるため、JavaScriptを使わずにカスタマイズしやすい構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

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

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <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">

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

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

      <!-- 詳細情報モーダルを開くボタン -->
      <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>

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

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

  <!-- 詳細情報モーダルを表示するラジオボタン -->
  <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>

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

      <!-- お知らせモーダルのタイトル -->
      <div class="html-css-multiple-modal-switch_heading">
        お知らせ
      </div>

      <!-- お知らせモーダルの説明文 -->
      <p class="html-css-multiple-modal-switch_message">
        お知らせ用のモーダルウインドウです。
      </p>

      <!-- お知らせモーダルを閉じるボタン -->
      <label
        for="html-css-modal-close"
        class="html-css-multiple-modal-switch_close">
        閉じる
      </label>

    </div>

    <!-- 確認画面モーダル -->
    <div class="html-css-multiple-modal-switch_modal html-css-multiple-modal-switch_modal-2">

      <!-- 確認画面モーダルのタイトル -->
      <div class="html-css-multiple-modal-switch_heading">
        確認画面
      </div>

      <!-- 確認画面モーダルの説明文 -->
      <p class="html-css-multiple-modal-switch_message">
        確認メッセージを表示するモーダルウインドウです。
      </p>

      <!-- 確認画面モーダルを閉じるボタン -->
      <label
        for="html-css-modal-close"
        class="html-css-multiple-modal-switch_close">
        閉じる
      </label>

    </div>

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

      <!-- 詳細情報モーダルのタイトル -->
      <div class="html-css-multiple-modal-switch_heading">
        詳細情報
      </div>

      <!-- 詳細情報モーダルの説明文 -->
      <p class="html-css-multiple-modal-switch_message">
        詳細説明を表示するモーダルウインドウです。
      </p>

      <!-- 詳細情報モーダルを閉じるボタン -->
      <label
        for="html-css-modal-close"
        class="html-css-multiple-modal-switch_close">
        閉じる
      </label>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* 複数モーダルウインドウを開く操作エリア */
.html-css-multiple-modal-switch_wrap{
  max-width:700px; /* 操作エリアの最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 操作エリア内側の余白 */
  border:1px solid #e5e7eb; /* 操作エリアの枠線 */
  border-radius:18px; /* 操作エリアの角丸 */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃え */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* 操作エリアのタイトル */
.html-css-multiple-modal-switch_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 操作エリアの説明文 */
.html-css-multiple-modal-switch_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* モーダルを開くボタン一覧 */
.html-css-multiple-modal-switch_buttons{
  display:flex; /* 3つのボタンを横並びにする */
  gap:12px; /* ボタン同士の間隔 */
}

/* 各モーダルを開くボタン */
.html-css-multiple-modal-switch_open{
  flex:1; /* 3つのボタンを同じ横幅にする */
  padding:12px; /* ボタン内側の余白 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingを横幅に含める */
}

/* ボタンへマウスを重ねた状態 */
.html-css-multiple-modal-switch_open:hover,
.html-css-multiple-modal-switch_close:hover{
  opacity:.9; /* 透明度。値を小さくすると薄く表示される */
}

/* 表示切り替え用のラジオボタン */
.html-css-multiple-modal-switch_check{
  display:none; /* ラジオボタン本体を非表示 */
}

/* すべてのモーダルで共通使用する背景 */
.html-css-multiple-modal-switch_overlay{
  display:none; /* 初期状態では背景を非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:center; /* モーダルを縦中央へ配置 */
  justify-content:center; /* モーダルを横中央へ配置 */
  padding:20px; /* 画面端との余白 */
  background:rgba(0,0,0,.6); /* 背景色。.6を大きくすると暗くなる */
  box-sizing:border-box; /* paddingを画面幅に含める */
}

/* いずれかのモーダル用ラジオボタンが選択された状態 */
#html-css-modal-1:checked~.html-css-multiple-modal-switch_overlay,
#html-css-modal-2:checked~.html-css-multiple-modal-switch_overlay,
#html-css-modal-3:checked~.html-css-multiple-modal-switch_overlay{
  display:flex; /* モーダル背景を表示 */
}

/* 背景クリックで閉じる領域 */
.html-css-multiple-modal-switch_background{
  position:absolute; /* 背景全体へ配置 */
  inset:0; /* 上下左右を0にして背景全体へ広げる */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 各モーダル本体 */
.html-css-multiple-modal-switch_modal{
  display:none; /* 初期状態では各モーダルを非表示 */
  position:relative; /* 背景より前面へ表示する基準 */
  z-index:1; /* 背景クリック領域より前面へ表示 */
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:420px; /* モーダルの最大横幅 */
  padding:36px 28px 28px; /* 上36px・左右28px・下28pxの内側余白 */
  border-radius:18px; /* モーダルの角丸 */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 50px rgba(0,0,0,.25); /* モーダルの影 */
  text-align:center; /* モーダル内の内容を中央揃え */
  box-sizing:border-box; /* paddingを横幅に含める */
}

/* お知らせモーダルの表示状態 */
#html-css-modal-1:checked~.html-css-multiple-modal-switch_overlay .html-css-multiple-modal-switch_modal-1{
  display:block; /* 1つ目のモーダルを表示 */
}

/* 確認画面モーダルの表示状態 */
#html-css-modal-2:checked~.html-css-multiple-modal-switch_overlay .html-css-multiple-modal-switch_modal-2{
  display:block; /* 2つ目のモーダルを表示 */
}

/* 詳細情報モーダルの表示状態 */
#html-css-modal-3:checked~.html-css-multiple-modal-switch_overlay .html-css-multiple-modal-switch_modal-3{
  display:block; /* 3つ目のモーダルを表示 */
}

/* 各モーダルのタイトル */
.html-css-multiple-modal-switch_heading{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:28px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 各モーダルの説明文 */
.html-css-multiple-modal-switch_message{
  margin:0; /* 外側余白をなくす */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
}

/* モーダルを閉じるボタン */
.html-css-multiple-modal-switch_close{
  display:inline-block; /* ボタンとして表示 */
  margin-top:28px; /* 上側28pxの余白 */
  padding:12px 24px; /* ボタン内側の上下・左右余白 */
  border-radius:8px; /* ボタンの角丸 */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン用の操作エリア */
  .html-css-multiple-modal-switch_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のボタン一覧 */
  .html-css-multiple-modal-switch_buttons{
    flex-direction:column; /* 3つのボタンを縦並びにする */
  }

  /* スマートフォン用のモーダル本体 */
  .html-css-multiple-modal-switch_modal{
    padding:32px 18px 20px; /* 上32px・左右18px・下20pxの内側余白 */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLには3つのボタンと3種類のモーダルウインドウの構造、CSSにはボタンやモーダルのデザイン、表示切り替えのスタイルを記述しています。JavaScriptは使用せず、HTMLのラジオボタンとlabel要素、CSSの:checkedセレクタを組み合わせてモーダルの表示を切り替えています。

モーダルを開くボタンをクリックすると対応するラジオボタンが選択され、その状態に応じて対応するモーダルだけが表示されます。背景または「閉じる」ボタンをクリックすると閉じる状態のラジオボタンへ切り替わるため、ページのスクロール位置を維持したままモーダルを閉じられます。

JavaScriptを利用できない環境でも導入しやすく、管理画面のお知らせ、確認画面、サービス説明、プロフィール紹介など、ボタンごとに異なる内容を表示したい場面へそのまま利用できます。

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

各ファイルの役割
index.html
モーダルを開くボタン、ラジオボタン、モーダルウインドウのHTML構造を管理します。ボタン名、モーダルタイトル、説明文を変更できます。

style.css
ボタン、モーダルウインドウ、背景、余白、角丸、影などのデザインと、CSSだけでモーダルを切り替える表示制御を管理します。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。sample/index.htmlをブラウザで開くと動作を確認できます。3つのボタンのいずれかをクリックすると対応するモーダルウインドウが表示され、背景または「閉じる」をクリックするとモーダルを閉じます。

カスタマイズできる内容
index.htmlではボタン名、モーダルタイトル、説明文を変更できます。モーダルを追加したい場合はラジオボタン、ボタン、モーダルを追加します。style.cssではボタン色、背景色、モーダルサイズ、余白、角丸、影、ボタン配置などを変更できます。

数値調整
style.cssのmax-width:420px;を変更するとモーダルの最大横幅が変わります。padding:36px 28px 28px;を変更するとモーダル内部の余白が変わります。gap:12px;を変更するとボタン同士の間隔が変わります。border-radius:18px;を変更するとボタンやモーダルの角丸の大きさが変わります。

レスポンシブ対応
style.cssではwidth:100%、max-width、padding、@media(max-width:640px)を使用してレスポンシブ対応しています。スマートフォンではボタンが縦並びになり、モーダルも画面幅に合わせて表示されます。タブレット・PCでも中央に見やすく表示されます。