ログインフォーム付きモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

ログインフォーム付きモーダルウインドウの作り方

ログインフォーム付きモーダルウインドウを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、「ログインフォームを表示」ボタンをクリックすると、画面中央にログインフォームを表示する仕組みを作成します。フォームにはメールアドレスとパスワードの2項目を用意し、通常は非表示にしておき、必要なときだけモーダルウインドウで表示できる構成にしています。

会員サイトやログイン機能のあるWebサービス、管理画面など、ページを移動せずにログインフォームを表示したい場面に適しています。メールアドレスとパスワードの両方を必須入力とし、メールアドレスには形式チェックを設定しています。入力内容に問題がなければ、指定したログイン処理へ情報を送信する仕組みです。また、「閉じる」ボタンをクリックするとモーダルウインドウを非表示にし、入力内容を初期状態へ戻します。

HTMLのaction属性とmethod=”post”を使用することで、利用者が用意したログイン処理のURLへメールアドレスとパスワードをPOST送信できます。ログイン情報の照合やセッション管理などの認証処理は、送信先のシステムで行う必要があります。また、CSSではモーダルの横幅や余白、背景色、角丸、入力欄、ボタンのデザインなどを自由に調整でき、サイトのデザインに合わせたログインフォームを作成できます。スマートフォン・タブレット・PCでも利用しやすいレスポンシブ対応の構成です。

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

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

デモ

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

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

<head>

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

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

  <!-- ページタイトル -->
  <title>ログインフォーム付きモーダルウインドウ</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!-- モーダルを開くボタン -->
  <button class="login-modal-window_open" id="login-modal-window-open" type="button">
    ログインフォームを表示
  </button>

  <!-- ログインモーダル本体 -->
  <div class="login-modal-window_modal" id="login-modal-window-modal" role="dialog" aria-modal="true" aria-labelledby="login-modal-window-title" aria-hidden="true">

    <!-- モーダルタイトル -->
    <div class="login-modal-window_modal-title" id="login-modal-window-title">
      ログイン
    </div>

    <!-- モーダル説明文 -->
    <p class="login-modal-window_modal-text">
      メールアドレスとパスワードを入力してください。
    </p>

    <!--
      ログインフォームの送信先設定

      1. 利用者自身でHTTPSに対応したログイン処理を用意してください。
         例：PHPなどで作成した認証処理や、利用中の認証システム。

      2. action="YOUR_LOGIN_URL" のYOUR_LOGIN_URLを、
         実際のログイン処理URLに置き換えてください。

      3. method="post"はそのまま使用してください。

      4. 送信する項目は次の2つです。
         email    ：メールアドレス
         password ：パスワード

      5. 受信側で異なる項目名を使用している場合は、
         input要素のname属性を受信側の仕様に合わせて変更してください。

      このサンプルに認証処理は含まれていません。
      パスワードの照合、セッション管理、CSRF対策、
      ログイン試行回数の制限などは受信側で実装してください。

      実際に使用する場合はHTTPSを必須とし、
      認証システムが要求する追加の認証情報やトークンも設定してください。
    -->

    <!-- ログインフォーム -->
    <form class="login-modal-window_form" id="login-modal-window-form" action="YOUR_LOGIN_URL" method="post">

      <!-- メールアドレス入力欄 -->
      <div class="login-modal-window_field">

        <!-- メールアドレスラベルと必須表示 -->
        <label class="login-modal-window_label" for="login-modal-window-email">
          メールアドレス
          <span class="login-modal-window_required">必須</span>
        </label>

        <!--
          メールアドレスを入力するテキストフィールド

          name="email"で送信します。
          type="email"でメールアドレスの形式をチェックします。
          autocomplete="username"で保存済みアカウントの入力を補助します。
          requiredで未入力を防止します。
        -->
        <input
          class="login-modal-window_input"
          id="login-modal-window-email"
          name="email"
          type="email"
          autocomplete="username"
          placeholder="sample@example.com"
          required>

      </div>

      <!-- パスワード入力欄 -->
      <div class="login-modal-window_field">

        <!-- パスワードラベルと必須表示 -->
        <label class="login-modal-window_label" for="login-modal-window-password">
          パスワード
          <span class="login-modal-window_required">必須</span>
        </label>

        <!--
          パスワードを入力するフィールド

          name="password"で送信します。
          type="password"で入力文字を隠します。
          autocomplete="current-password"で保存済みパスワードの入力を補助します。
          requiredで未入力を防止します。
        -->
        <input
          class="login-modal-window_input"
          id="login-modal-window-password"
          name="password"
          type="text"
          autocomplete="off"
          placeholder="パスワードを入力してください"
          required>

      </div>

      <!-- 操作ボタン -->
      <div class="login-modal-window_actions">

        <!-- モーダルを閉じるボタン -->
        <button class="login-modal-window_close" id="login-modal-window-close" type="button">
          閉じる
        </button>

        <!-- 指定したログイン処理へPOST送信するボタン -->
        <button class="login-modal-window_submit" type="submit">
          ログイン
        </button>

      </div>

    </form>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>

</html>

/* =========================================
   モーダルを開くボタン
========================================= */

/* ログインフォームを表示するボタン */
.login-modal-window_open{
  padding:12px 24px; /* 上下12px・左右24px。値を大きくするとボタンが大きくなる */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}


/* =========================================
   モーダルウインドウ
========================================= */

/* モーダル本体 */
.login-modal-window_modal{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面を基準に固定 */
  top:50%; /* モーダルの上端を画面の縦方向中央へ配置 */
  left:50%; /* モーダルの左端を画面の横方向中央へ配置 */
  z-index:9999; /* 表示順。値を大きくすると前面に配置されやすくなる */
  width:calc(100% - 40px); /* 画面幅から40pxを引いて左右の余白を確保 */
  max-width:420px; /* 最大横幅。値を大きくするとモーダルが横に広がる */
  max-height:calc(100vh - 40px); /* 画面の高さから40pxを引いた範囲に収める */
  overflow-y:auto; /* 内容が収まらない場合は縦スクロール */
  padding:28px; /* 内側余白。値を大きくすると内容と外周の間隔が広がる */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 40px rgba(0,0,0,.2); /* 下方向20px・ぼかし40pxの影 */
  font-family:sans-serif; /* モーダル内のフォント */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
  transform:translate(-50%,-50%); /* 自身の横幅と高さの半分を戻して中央配置 */
}

/* モーダル表示状態 */
.login-modal-window_modal.is-active{
  display:block; /* モーダル本体を表示 */
}

/* モーダルタイトル */
.login-modal-window_modal-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* モーダル説明文 */
.login-modal-window_modal-text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとフォームとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:14px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}


/* =========================================
   ログインフォーム
========================================= */

/* フォーム全体 */
.login-modal-window_form{
  display:grid; /* 入力項目を縦方向に配置 */
  gap:22px; /* 入力項目同士の間隔。値を大きくすると間隔が広がる */
  text-align:left; /* フォーム内の文字を左揃えにする */
}

/* 入力項目 */
.login-modal-window_field{
  display:grid; /* ラベルと入力欄を縦方向に配置 */
  gap:8px; /* ラベルと入力欄の間隔。値を大きくすると間隔が広がる */
}

/* 入力項目のラベル */
.login-modal-window_label{
  color:#1f2937; /* ラベルの文字色 */
  font-size:15px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
}

/* 必須表示 */
.login-modal-window_required{
  margin-left:6px; /* ラベルと必須表示の間隔。値を大きくすると間隔が広がる */
  color:#dc2626; /* 必須表示の文字色 */
  font-size:13px; /* 必須表示の文字サイズ */
}

/* 入力欄 */
.login-modal-window_input{
  width:100%; /* 入力欄の横幅を親要素に合わせる */
  padding:12px 14px; /* 上下12px・左右14px。値を大きくすると内側余白が広がる */
  border:1px solid #cbd5e1; /* 入力欄の枠線。1pxが太さ、solidが種類 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  font:inherit; /* 親要素のフォントを継承 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* プレースホルダー */
.login-modal-window_input::placeholder{
  color:#9ca3af; /* 未入力時に表示する入力例の文字色 */
}

/* 入力欄のフォーカス状態 */
.login-modal-window_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,.15); /* 3pxの強調枠。値を大きくすると外側へ広がる */
}


/* =========================================
   操作ボタン
========================================= */

/* 操作ボタンの配置 */
.login-modal-window_actions{
  display:flex; /* 閉じるボタンとログインボタンを横並びにする */
  justify-content:flex-end; /* ボタンを右側に配置 */
  gap:14px; /* ボタン同士の間隔。値を大きくすると間隔が広がる */
  margin-top:8px; /* 上側8pxの余白。値を大きくすると入力欄との間隔が広がる */
}

/* 閉じるボタン・ログインボタン共通 */
.login-modal-window_close,
.login-modal-window_submit{
  flex:1; /* 2つのボタンで横幅を均等に分ける */
  min-width:0; /* 狭い画面でもボタンを縮小可能にする */
  padding:13px 18px; /* 上下13px・左右18px。値を大きくするとボタンが大きくなる */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* 閉じるボタン */
.login-modal-window_close{
  background:#111827; /* 閉じるボタンの背景色 */
}

/* ログインボタン */
.login-modal-window_submit{
  background:#2563eb; /* ログインボタンの背景色 */
}


/* =========================================
   レスポンシブ対応
========================================= */

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

  /* モーダル本体 */
  .login-modal-window_modal{
    padding:24px 18px; /* 上下24px・左右18px。スマートフォンでは余白を小さくする */
  }

  /* 操作ボタン */
  .login-modal-window_actions{
    gap:10px; /* ボタン同士の間隔を10pxにする */
  }

  /* 閉じるボタン・ログインボタン */
  .login-modal-window_close,
  .login-modal-window_submit{
    padding:13px 12px; /* 上下13px・左右12px。狭い画面に合わせて余白を調整 */
  }

}

// =========================================
// ログインフォームとモーダルの取得
// =========================================

// モーダルを開くボタンを取得
const loginModalWindowOpen =
  document.getElementById("login-modal-window-open");

// モーダル本体を取得
const loginModalWindowModal =
  document.getElementById("login-modal-window-modal");

// モーダルを閉じるボタンを取得
const loginModalWindowClose =
  document.getElementById("login-modal-window-close");

// ログインフォームを取得
const loginModalWindowForm =
  document.getElementById("login-modal-window-form");


// =========================================
// モーダルを開く
// =========================================

// ログインフォームを表示するボタンをクリックしたとき
loginModalWindowOpen.addEventListener("click", () => {

  // モーダルを表示
  loginModalWindowModal.classList.add("is-active");

  // アクセシビリティ用の非表示状態を解除
  loginModalWindowModal.setAttribute("aria-hidden", "false");

});


// =========================================
// モーダルを閉じる
// =========================================

// 閉じるボタンをクリックしたとき
loginModalWindowClose.addEventListener("click", () => {

  // モーダルを非表示
  loginModalWindowModal.classList.remove("is-active");

  // アクセシビリティ用の非表示状態を設定
  loginModalWindowModal.setAttribute("aria-hidden", "true");

  // 入力内容を初期状態に戻す
  loginModalWindowForm.reset();

  // パスワード欄の入力内容を消去
  // ブラウザの自動入力がある場合も閉じる際に空欄へ戻す
  document.getElementById("login-modal-window-password").value="";

});

// フォームの送信はHTMLのmethod="post"で行います。
// JavaScriptでは送信を停止しません。
// action属性に指定したログイン処理URLへ送信されます。
// 実際の認証やログイン状態の管理は受信側で行ってください。

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではログインフォームを開くボタンと、メールアドレス・パスワードの入力欄を備えたモーダルウインドウを作成します。CSSではモーダルの表示位置やフォームのデザインを設定し、JavaScriptではモーダルの開閉と入力内容のリセットを制御します。オーバーレイは使用せず、モーダル本体だけを画面中央に表示する構成です。配布用コードではPOST送信を使用しますが、実際の認証処理は含まれていないため、利用者自身でログイン処理に対応したシステムを用意する必要があります。

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

各ファイルの役割
index.htmlは、ログインフォームを開くボタンとモーダルウインドウを構成するファイルです。メールアドレスとパスワードの2項目を用意し、どちらも必須入力にしています。メールアドレスには形式チェックを設定しており、フォームのaction属性でPOST送信先のURLを指定できます。

style.cssは、モーダルウインドウとログインフォームのデザインを設定するファイルです。モーダルの最大横幅、余白、背景色、角丸、影、入力欄の枠線、ボタンの色や配置などを変更できます。

script.jsは、モーダルウインドウの開閉を制御するファイルです。「ログインフォームを表示」をクリックするとモーダルを表示し、「閉じる」をクリックすると非表示にして入力内容をリセットします。ログインボタンによる送信はJavaScriptで停止せず、HTMLのPOST送信を使用します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置してください。3ファイルを同じ階層に保存すると、index.htmlからCSSとJavaScriptが読み込まれます。

index.htmlをブラウザで開き、「ログインフォームを表示」をクリックすると、画面中央にログインフォームが表示されます。メールアドレスとパスワードを入力し、「ログイン」をクリックすると、指定したURLへPOST送信する構成です。

2項目とも必須入力です。未入力の項目がある場合やメールアドレスの形式が正しくない場合は、ブラウザの標準機能によって送信が制限されます。「閉じる」をクリックするとモーダルが閉じ、入力内容が初期状態に戻ります。

配布用コードでは、メールアドレスとパスワードの入力を補助するautocomplete属性を設定しています。ブラウザやパスワード管理機能によっては、保存済みのログイン情報が自動入力される場合があります。

POST送信先の設定
実際にログイン機能として使用するには、HTTPSに対応したログイン処理を利用者自身で用意してください。PHPなどで作成した認証処理や、既存の認証システムを利用できます。

index.html内のaction="YOUR_LOGIN_URL"を探し、YOUR_LOGIN_URLを実際のログイン処理URLへ置き換えてください。method="post"はそのまま使用します。

送信される項目は、email（メールアドレス）とpassword（パスワード）の2つです。受信側のシステムでは、この2項目を受け取れるようにしてください。受信側で異なる項目名を使用している場合は、HTMLのname属性を受信側の仕様に合わせて変更します。

ログイン処理URLを設定したら、テスト用アカウントを使用して送信を確認してください。送信先URLを設定していない状態では、実際のログイン機能として利用できません。また、受信側でCSRFトークンなどの追加情報を要求する場合は、そのシステムの仕様に合わせた項目をフォームへ追加する必要があります。

このサンプルには、アカウント情報の照合、パスワードの検証、セッション管理、ログイン状態の維持、ログイン成功・失敗時の画面表示などは含まれていません。パスワードの安全な保存・照合、CSRF対策、ログイン試行回数の制限なども、利用者自身が用意する認証システム側で実装してください。ブラウザ側の必須入力チェックだけでは、認証システムの安全性は保証されません。

カスタマイズできる内容
index.htmlでは、モーダルを開くボタンの文字、モーダルタイトル、説明文、メールアドレスとパスワードのラベル、プレースホルダー、閉じるボタンやログインボタンの文字などを変更できます。

パスワード入力欄は、type="password"を使用すると入力文字が伏せられます。type="text"へ変更すると入力文字がそのまま表示されますが、実際のログインフォームではパスワードが第三者に見られないよう、type="password"の使用を推奨します。

また、autocomplete属性では、ブラウザによる保存済みログイン情報の入力補助を設定できます。メールアドレスにはautocomplete="username"、パスワードにはautocomplete="current-password"を使用する構成です。

style.cssでは、モーダルの最大横幅、表示位置、背景色、内側余白、角丸、影、入力欄のサイズ、枠線、閉じるボタンとログインボタンの色や間隔などを変更できます。

script.jsでは、モーダルの開閉処理や入力内容のリセット動作を変更できます。例えば、loginModalWindowForm.reset();を削除すると、モーダルを閉じてもフォームの入力内容を保持できます。ただし、ログインフォームではパスワードを残さない運用が推奨されるため、実際に使用する場合はリセット処理を維持してください。

数値調整
style.css

padding:12px 24px;
モーダルを開くボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。

border-radius:8px;
ボタンや入力欄の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。

top:50%;
モーダルの縦方向の表示位置です。50%を基準に画面中央へ配置しています。値を小さくすると上方向、大きくすると下方向へ移動します。

left:50%;
モーダルの横方向の表示位置です。50%を基準に画面中央へ配置しています。値を小さくすると左方向、大きくすると右方向へ移動します。

width:calc(100% - 40px);
モーダルの横幅です。画面幅から40pxを引き、左右に余白を確保します。40pxを大きくすると画面端との間隔が広がります。

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

max-height:calc(100vh - 40px);
モーダルの最大高さです。画面の高さから40pxを引いた範囲に収めます。内容が収まらない場合は、モーダル内で縦スクロールできます。

padding:28px;
モーダルの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
モーダルの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルの影です。20pxは影の上下位置、40pxはぼかし範囲を表します。最後の.2は影の透明度で、値を大きくすると影が濃くなります。

margin:0 0 12px;
モーダルタイトルの下側余白です。12pxを大きくすると説明文との間隔が広がります。

font-size:22px;
モーダルタイトルの文字サイズです。値を大きくするとタイトルが大きくなります。

margin:0 0 28px;
モーダル説明文の下側余白です。28pxを大きくすると入力フォームとの間隔が広がります。

gap:22px;
ログインフォーム内の入力項目同士の間隔です。値を大きくすると項目の間隔が広がり、小さくすると狭くなります。

gap:8px;
ラベルと入力欄の間隔です。値を大きくすると間隔が広がります。

margin-left:6px;
ラベルと赤色の「必須」表示の間隔です。値を大きくすると間隔が広がります。

padding:12px 14px;
メールアドレスとパスワードの入力欄の内側余白です。上下の12pxを大きくすると入力欄が高くなり、左右の14pxを大きくすると文字と枠線の間隔が広がります。

border:1px solid #cbd5e1;
入力欄の枠線です。1pxは太さ、solidは実線、#cbd5e1は色を表します。

outline:3px solid rgba(37,99,235,.15);
入力欄にフォーカスしたときの強調枠です。3pxを大きくすると枠が太くなり、小さくすると細くなります。

gap:14px;
閉じるボタンとログインボタンの間隔です。値を大きくすると間隔が広がります。

margin-top:8px;
操作ボタンエリアの上側余白です。値を大きくすると入力欄との間隔が広がります。

padding:13px 18px;
閉じるボタンとログインボタンの内側余白です。上下の13pxを大きくするとボタンが高くなり、左右の18pxを大きくすると横に広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。モーダルにはwidth:calc(100% - 40px);とmax-width:420px;を設定しており、画面幅が狭い場合は自動的に縮小します。また、max-height:calc(100vh - 40px);とoverflow-y:auto;によって、画面の高さに内容が収まらない場合はモーダル内で縦スクロールできます。

画面幅640px以下では、モーダルの内側余白をpadding:24px 18px;へ変更します。さらに、閉じるボタンとログインボタンの間隔を10pxに縮小し、ボタンの左右余白を12pxへ調整します。2つのボタンは均等な横幅で表示され、スマートフォン・タブレット・PCでも利用しやすい構成です。