HTML/CSSだけで動くモーダルウインドウの作り方【HTML/CSS・サンプルコード付き】

html/css/js
2025.09.22

HTML/CSSだけで動くモーダルウインドウの作り方

HTMLとCSSだけで動くモーダルウインドウの作り方を紹介します。このサンプルでは、JavaScriptを使わずに、リンクとCSSの指定だけでモーダルを表示・非表示できます。シンプルなポップアップ表示や、お知らせ表示を手軽に作りたい場合に利用できます。

関連記事：
・基本モーダルウインドウを作る方法
・ページ読み込み時に自動表示するモーダルウインドウを作る方法
・ページ表示3秒後に出るモーダルウインドウの作り方
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

基本モーダルウインドウ

ボタンをクリックするとモーダルウインドウを表示します。

モーダルを開く
モーダルタイトル

これはHTMLとCSSだけで実装したモーダルウインドウです。
閉じるボタン、または背景部分をクリックすると閉じることができます。

閉じる

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

<!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-modal_wrap">

    <div class="html-css-modal_title">
      基本モーダルウインドウ
    </div>

    <p class="html-css-modal_text">
      ボタンをクリックするとモーダルウインドウを表示します。
    </p>

    <!-- モーダルを開くボタンです -->
    <label for="html-css-modal-check" class="html-css-modal_open">
      モーダルを開く
    </label>

  </div>

  <!-- モーダルの表示状態を管理するチェックボックスです -->
  <input type="checkbox" id="html-css-modal-check" class="html-css-modal_check">

  <!-- モーダル全体です -->
  <div class="html-css-modal_overlay">

    <!-- 背景クリックで閉じます -->
    <label for="html-css-modal-check" class="html-css-modal_background"></label>

    <!-- モーダル本体です -->
    <div class="html-css-modal_modal">

      <div class="html-css-modal_modal-title">
        モーダルタイトル
      </div>

      <p class="html-css-modal_modal-text">
        これはHTMLとCSSだけで実装したモーダルウインドウです。<br>
        閉じるボタン、または背景部分をクリックすると閉じることができます。
      </p>

      <!-- モーダルを閉じるボタンです -->
      <label for="html-css-modal-check" class="html-css-modal_close">
        閉じる
      </label>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルのみで動作します。JavaScriptは不要なので、2つのファイルを同じフォルダに配置するだけですぐに利用できます。 

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

index.htmlとstyle.cssを同じフォルダへ保存し、ブラウザでindex.htmlを開いてください。モーダルを開くボタンをクリックすると、HTMLとCSSだけで実装したモーダルウインドウを表示できます。背景部分または「閉じる」ボタンをクリックするとモーダルを閉じることができます。

コメント