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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンとlabel要素を利用して3種類のモーダルウインドウを切り替えて表示します。JavaScriptを使用せず、選択したラジオボタンに応じて対応するモーダルだけを表示する仕組みです。CSSではモーダル本体や背景、ボタンのデザイン、表示切り替え、レスポンシブ表示を設定しています。

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

各ファイルの役割
index.htmlはページ全体と3種類のモーダルウインドウを構成するファイルです。ボタン名、各モーダルのタイトル、説明文を変更できます。ラジオボタンとlabel要素を利用して、お知らせ・確認画面・詳細情報のモーダルを切り替えて表示します。

style.cssはページ全体やモーダルウインドウのデザインを設定するファイルです。背景色、文字色、ボタン、モーダル本体、背景の暗さ、角丸、影、余白などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「お知らせ」「確認画面」「詳細情報」のいずれかをクリックすると対応するモーダルウインドウが表示されます。背景または「閉じる」をクリックするとモーダルを閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、各ボタンの文字、各モーダルのタイトル、本文、閉じるボタンの文字を変更できます。用途に合わせて、お知らせ、利用規約、商品説明、確認画面などさまざまな内容へ変更できます。

style.cssでは操作エリアの横幅、背景色、ボタンの色、モーダルの横幅、余白、背景の暗さ、角丸、影、スマートフォン表示時のレイアウトなどを自由に変更できます。

数値調整
style.css
max-width:700px;
操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
操作エリアの内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

gap:12px;
開くボタン同士の間隔です。値を大きくするとボタン同士が離れ、小さくすると近づきます。

max-width:420px;
モーダル本体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。

padding:36px 28px 28px;
モーダル本体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。

background:rgba(0,0,0,.6);
モーダル表示時の背景の暗さです。.6を大きくすると背景が濃くなり、小さくすると明るくなります。

box-shadow:0 20px 50px rgba(0,0,0,.25);
モーダル本体の影です。数値を大きくすると影が広がり、小さくすると控えめになります。

margin-top:28px;
閉じるボタンの上側余白です。値を大きくすると本文との間隔が広がり、小さくすると近づきます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより、画面幅に合わせて操作エリアやモーダル本体が自動で縮小されます。また、640px以下ではflex-direction:column;によって3つのボタンを縦並びに変更し、padding:24px 18px;およびpadding:32px 18px 20px;で余白も調整しているため、スマートフォン・タブレット・PCで利用できます。