【HTML/CSS】コピペで作る！モーダルウィンドウデザイン参考2選

Q: モーダルを開閉させるためにJavaScript（jQuery）は必要ですか？

いいえ、必須ではありません。 当記事のデザインは、HTMLのチェックボックス（<input type="checkbox">）とCSSの:checked疑似クラスを連動させる手法を使用しているため、コピペだけで動作します。

Q: モーダルがヘッダーや他の画像の「裏側」に隠れて表示されてしまいます。

重なりの順序（z-index）が原因です。 CSSコード内にあるモーダル全体の親要素のz-indexの数値を現状（例：999）よりもさらに大きい数値（例：9999）に変更して、最前面に表示されるよう調整してください。

Q: 黒い半透明の「背景部分」をクリックした時にも、モーダルが閉じるようにできますか？

可能です。 黒い背景を作っている要素（<label>タグなど）に対して、チェックボックスをオフにするfor属性を正しく指定することで、背景クリックでも閉じる仕組みになっています。

2026年2月25日2026年6月13日

ラジオボタンで作るモーダルの実装例。リンク風とボタン風の2つのスタイルが表示されているCODE STOCKのウェブサイト画面。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、画面中央に表示させるポップアップ・モーダルウィンドウデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、ポップアップウィンドウを作成するにはdivタグによるボックスと各ボタンのinputタグを利用します。

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

さらに、inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

HTMLのdivタグとは？横並び・左右分割の使い方とCSS装飾

【HTML】inputタグのtype種類一覧！属性の使い方とCSS装飾

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、モーダルウィンドウ以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock

ラジオボタンで作るポップアップ・モーダルウィンドウ

ここでは、以下のラジオボタンで作るポップアップ・モーダルウィンドウデザイン例を記載しています。

ラジオボタンで作るポップアップ・モーダルウィンドウデザイン

リンク風
ボタン風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もモーダルウィンドウページでは選択式でご用意しました。

調整項目一覧

リンク色
ホバー時の色
ボタン色
文字色

ご興味があれば「モーダルウィンドウ一覧ページ」を一読ください。

Code Stock

MODAL | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 By radio button ラジオボタンで作るモーダルモーダルを開くリンク風▼ モーダルを開くボタ…

リンク風

HTMLコード表示

<div class="modal-1__wrap">
  <input type="radio" id="modal-1__open" class="modal-1__open-input" name="modal-1__trigger"/>
  <label for="modal-1__open" class="modal-1__open-label">モーダルを開く</label>
  <input type="radio" id="modal-1__close" name="modal-1__trigger"/>
  <div class="modal-1">
    <div class="modal-1__content-wrap">
      <label for="modal-1__close" class="modal-1__close-label">×</label>
      <div class="modal-1__content">ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。<br/>ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。<br/>ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。</div>
    </div>
    <label for="modal-1__close">
      <div class="modal-1__background"></div>
    </label>
  </div>
</div>

CSSコード表示

.modal-1__wrap {
  display: flex;
  justify-content: center;
}

.modal-1__wrap input {
  display: none;
}

.modal-1__open-label,
.modal-1__close-label {
  cursor: pointer;
}

.modal-1__open-label {
  color: #4f96f6;
  font-size: .95em;
}

.modal-1__open-label:hover {
  text-decoration: underline;
  cursor: pointer;
  color: #c7511f;
}

.modal-1 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.modal-1__open-input:checked + label + input + .modal-1 {
  display: block;
  animation: modal-1-animation .6s;
}

.modal-1__content-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 650px;
  background-color: #fefefe;
  z-index: 2;
  border-radius: 5px;
}

.modal-1__close-label {
  background-color: #777;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 20px;
  width: 36px;
  height: 36px;
  line-height: 1.5;
  text-align: center;
  display: table-cell;
  position: fixed;
  top: -15px;
  right: -2%;
  z-index: 99999;
  font-size: 1.4em;
}

.modal-1__content {
  max-height: 50vh;
  overflow-y: auto;
  padding: 39px 45px 40px;
}

.modal-1__background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .45);
  z-index: 1;
}

@keyframes modal-1-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 520px) {
  .modal-1__open-label {
    max-width: 90%;
    padding: .94em 2.1em .94em 2.6em;
  }

  .modal-1__close-label {
    top: -17px;
    right: -4%;
  }

  .modal-1__content-wrap {
    width: 90vw;
  }

  .modal-1__content {
    padding: 33px 21px 35px;
    max-width: 100%;
  }
}

ボタン風

HTMLコード表示

<div class="modal-2__wrap">
  <input type="radio" id="modal-2__open" class="modal-2__open-input" name="modal-2__trigger"/>
  <label for="modal-2__open" class="modal-2__open-label">モーダルを開く</label>
  <input type="radio" id="modal-2__close" name="modal-2__trigger"/>
  <div class="modal-2">
    <div class="modal-2__content-wrap">
      <label for="modal-2__close" class="modal-2__close-label">×</label>
      <div class="modal-2__content">ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。<br/>ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。<br/>ここにモーダルの中身が入ります。ここにモーダルの中身が入ります。</div>
    </div>
    <label for="modal-2__close">
      <div class="modal-2__background"></div>
    </label>
  </div>
</div>

CSSコード表示

.modal-2__wrap input {
  display: none;
}

.modal-2__open-label,
.modal-2__close-label {
  cursor: pointer;
}

.modal-2__open-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin:0 auto;
  padding: .8em 2em;
  border: none;
  border-radius: 5px;
  background-color: #2589d0;
  color: #ffffff;
  font-weight: 600;
  font-size: 1em;
}

.modal-2__open-label:hover {
  background-color: #fff;
  color: #2589d0;
  outline: 1px solid #2589d0;
}

.modal-2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.modal-2__open-input:checked + label + input + .modal-2 {
  display: block;
  animation: modal-2-animation .6s;
}

.modal-2__content-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 650px;
  background-color: #fefefe;
  z-index: 2;
  border-radius: 5px;
}

.modal-2__close-label {
  background-color: #777;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 20px;
  width: 36px;
  height: 36px;
  line-height: 1.6;
  text-align: center;
  display: table-cell;
  position: fixed;
  top: -15px;
  right: -2%;
  z-index: 99999;
  font-size: 1.3em;
}

.modal-2__content {
  max-height: 50vh;
  overflow-y: auto;
  padding: 39px 45px 40px;
}

.modal-2__background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .45);
  z-index: 1;
}

@keyframes modal-2-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 520px) {
  .modal-2__open-label {
    max-width: 90%;
    padding: .94em 2.1em .94em 2.6em;
  }

  .modal-2__close-label {
    top: -17px;
    right: -4%;
  }

  .modal-2__content-wrap {
    width: 90vw;
  }

  .modal-2__content {
    padding: 33px 21px 35px;
    max-width: 100%;
  }
}