入力内容確認ドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

入力内容確認ドロワーメニューの作り方

入力内容確認ドロワーメニューをHTML・CSS・JavaScriptで作る方法を紹介します。フォームへ入力した内容を確認ボタンで取得し、画面左側から開くドロワーメニュー内へ一覧表示できるサンプルです。入力後すぐに内容を確認できるため、送信前の確認画面を分かりやすく表示できます。

サンプルでは、お名前・メールアドレス・お問い合わせ内容を入力し、「入力内容を確認する」ボタンをクリックするとドロワーメニューが表示されます。JavaScriptで各入力値を取得して確認欄へ反映するため、ページを移動せずに入力内容を確認できます。

お問い合わせ画面や会員登録画面、予約フォーム、申込フォームなど、送信前に利用者へ入力内容を確認してもらいたい場面で利用できます。HTMLでは入力項目や確認項目、CSSではドロワーメニューの幅や色、余白などを変更でき、用途に合わせてカスタマイズできます。

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

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

デモ

入力内容確認ドロワーメニュー

フォームへ入力した内容を送信前にドロワーメニューで確認できます。

入力例

name="山田太郎"; email="sample@example.com"; message="資料について詳しく知りたいです。";

入力フォーム

お名前メールアドレスお問い合わせ内容

入力内容確認

お名前

メールアドレス

お問い合わせ内容

デモのため、入力内容は送信されません。

「フォームを表示」をクリックし、「確認画面へ」を押すと入力内容確認画面へ切り替わります。

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

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

  <!-- ドロワーメニューを開く操作エリア -->
  <div class="confirm-input-drawer_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="confirm-input-drawer_title">
      入力内容確認ドロワーメニュー
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="confirm-input-drawer_text">
      フォームへ入力した内容を送信前にドロワーメニューで確認できます。
    </p>

    <!-- 入力例 -->
    <div class="confirm-input-drawer_example">

      <!-- 入力例の見出し -->
      <div class="confirm-input-drawer_example-label">
        入力例
      </div>

      <!-- お名前の入力例 -->
      <code>name="山田 太郎";</code>

      <!-- メールアドレスの入力例 -->
      <code>email="sample@example.com";</code>

      <!-- お問い合わせ内容の入力例 -->
      <code>message="資料について詳しく知りたいです。";</code>

    </div>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="confirm-input-drawer_open"
      type="button"
      data-confirm-input-drawer-open>
      フォームを表示
    </button>

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="confirm-input-drawer_overlay"
    data-confirm-input-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <div
      class="confirm-input-drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirm-input-drawer-heading">

      <!-- ドロワーメニュー上部 -->
      <div class="confirm-input-drawer_header">

        <!-- ドロワーメニューのタイトル -->
        <div
          class="confirm-input-drawer_heading"
          id="confirm-input-drawer-heading">
          入力フォーム
        </div>

        <!-- ドロワーメニューを閉じるボタン -->
        <button
          class="confirm-input-drawer_close"
          type="button"
          data-confirm-input-drawer-close
          aria-label="ドロワーメニューを閉じる">
          ×
        </button>

      </div>

      <!-- 入力フォームエリア -->
      <div
        class="confirm-input-drawer_form"
        data-confirm-input-drawer-form-area>

        <!-- お名前入力欄 -->
        <label class="confirm-input-drawer_label">
          お名前

          <input
            class="confirm-input-drawer_input"
            type="text"
            value="山田 太郎"
            data-confirm-input-drawer-name>

        </label>

        <!-- メールアドレス入力欄 -->
        <label class="confirm-input-drawer_label">
          メールアドレス

          <input
            class="confirm-input-drawer_input"
            type="email"
            value="sample@example.com"
            data-confirm-input-drawer-email>

        </label>

        <!-- お問い合わせ内容入力欄 -->
        <label class="confirm-input-drawer_label">
          お問い合わせ内容

          <textarea
            class="confirm-input-drawer_textarea"
            data-confirm-input-drawer-message>資料について詳しく知りたいです。</textarea>

        </label>

        <!-- 入力内容確認画面へ進むボタン -->
        <button
          class="confirm-input-drawer_submit"
          type="button"
          data-confirm-input-drawer-show>
          確認画面へ
        </button>

      </div>

      <!-- 入力内容確認エリア -->
      <div
        class="confirm-input-drawer_confirm"
        data-confirm-input-drawer-confirm-area>

        <!-- 確認画面のタイトル -->
        <div class="confirm-input-drawer_confirm-title">
          入力内容確認
        </div>

        <!-- お名前の確認項目 -->
        <div class="confirm-input-drawer_confirm-item">

          <span class="confirm-input-drawer_confirm-label">
            お名前
          </span>

          <span data-confirm-input-drawer-view-name></span>

        </div>

        <!-- メールアドレスの確認項目 -->
        <div class="confirm-input-drawer_confirm-item">

          <span class="confirm-input-drawer_confirm-label">
            メールアドレス
          </span>

          <span data-confirm-input-drawer-view-email></span>

        </div>

        <!-- お問い合わせ内容の確認項目 -->
        <div class="confirm-input-drawer_confirm-item">

          <span class="confirm-input-drawer_confirm-label">
            お問い合わせ内容
          </span>

          <span data-confirm-input-drawer-view-message></span>

        </div>

        <!-- 確認画面の操作ボタン -->
        <div class="confirm-input-drawer_buttons">

          <!-- 入力フォームへ戻るボタン -->
          <button
            class="confirm-input-drawer_back"
            type="button"
            data-confirm-input-drawer-back>
            戻る
          </button>

          <!-- 送信ボタン -->
          <button
            class="confirm-input-drawer_send"
            type="button"
            data-confirm-input-drawer-send>
            送信する
          </button>

        </div>

        <!-- デモ用の送信メッセージ -->
        <p
          class="confirm-input-drawer_notice"
          data-confirm-input-drawer-notice
          role="status">
          デモのため、入力内容は送信されません。
        </p>

      </div>

    </div>

  </div>

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

</body>
</html>

/* =========================================
   共通設定
========================================= */

/* 全要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* 幅と高さにpaddingとborderを含める */
}

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxのページ余白 */
  background:#f8fafc; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ボタンと入力欄 */
button,
input,
textarea{
  font:inherit; /* ページと同じフォントを使用 */
}

/* =========================================
   操作エリア
========================================= */

/* 操作エリア全体 */
.confirm-input-drawer_wrap{
  width:100%; /* 画面幅に合わせて表示 */
  max-width:700px; /* 操作エリアの最大横幅 */
  margin:40px auto; /* 上下40pxの余白と左右中央配置 */
  padding:32px; /* 操作エリア内側の余白 */
  border:1px solid #e5e7eb; /* 枠線の太さと色 */
  border-radius:18px; /* 操作エリアの角丸 */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃え */
}

/* 操作エリアのタイトル */
.confirm-input-drawer_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字の太さ */
  line-height:1.5; /* タイトルの行間 */
}

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

/* 入力例エリア */
.confirm-input-drawer_example{
  display:grid; /* 入力例を縦方向へ配置 */
  gap:8px; /* 各入力例の間隔 */
  margin:0 0 24px; /* 下側24pxの余白 */
  padding:16px; /* 入力例エリア内側の余白 */
  border:1px solid #dbeafe; /* 枠線の太さと色 */
  border-radius:10px; /* 入力例エリアの角丸 */
  background:#eff6ff; /* 入力例エリアの背景色 */
  color:#1e3a8a; /* 入力例エリアの文字色 */
  text-align:left; /* 内容を左揃え */
}

/* 入力例の見出し */
.confirm-input-drawer_example-label{
  color:#1e3a8a; /* 見出しの文字色 */
  font-size:14px; /* 見出しの文字サイズ */
  font-weight:700; /* 見出し文字の太さ */
}

/* 入力例のコード */
.confirm-input-drawer_example code{
  display:block; /* 各コードを独立した行へ表示 */
  padding:8px 10px; /* コード内側の余白 */
  border-radius:6px; /* コード部分の角丸 */
  background:#ffffff; /* コード部分の背景色 */
  color:#1f2937; /* コード部分の文字色 */
  font-family:monospace; /* 等幅フォント */
  overflow-wrap:anywhere; /* 長い文字列を折り返す */
}

/* ドロワーメニューを開くボタン */
.confirm-input-drawer_open{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 24px; /* ボタン内側の余白 */
  border:none; /* 標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字の太さ */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* 開くボタンのホバー状態 */
.confirm-input-drawer_open:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* =========================================
   ドロワーメニュー
========================================= */

/* ドロワーメニュー表示時の背景 */
.confirm-input-drawer_overlay{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  background:rgba(0,0,0,.55); /* 背景色。.55を大きくすると暗くなる */
}

/* ドロワーメニューの表示状態 */
.confirm-input-drawer_overlay.is-active{
  display:block; /* 表示用クラスが付いた時に表示 */
}

/* ドロワーメニュー本体 */
.confirm-input-drawer{
  width:420px; /* ドロワーメニューの横幅 */
  max-width:90%; /* 画面幅を超えない最大横幅 */
  height:100%; /* 画面の高さに合わせる */
  padding:28px; /* ドロワー内側の余白 */
  overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロール */
  background:#ffffff; /* ドロワーの背景色 */
  box-shadow:10px 0 40px rgba(0,0,0,.2); /* ドロワー右側の影 */
  animation:confirm-input-drawer-slide .35s ease forwards; /* 0.35秒で左側から表示 */
}

/* ドロワーメニュー上部 */
.confirm-input-drawer_header{
  display:flex; /* タイトルと閉じるボタンを横並び */
  align-items:center; /* 垂直方向中央揃え */
  justify-content:space-between; /* 両端へ配置 */
  gap:16px; /* タイトルと閉じるボタンの間隔 */
  margin:0 0 20px; /* 下側20pxの余白 */
}

/* ドロワーメニューのタイトル */
.confirm-input-drawer_heading{
  margin:0; /* 外側余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:24px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字の太さ */
  line-height:1.5; /* タイトルの行間 */
}

/* ドロワーメニューを閉じるボタン */
.confirm-input-drawer_close{
  flex-shrink:0; /* ボタンの縮小を防ぐ */
  width:38px; /* ボタンの横幅 */
  height:38px; /* ボタンの高さ */
  padding:0; /* 内側余白を削除 */
  border:none; /* 標準の枠線を削除 */
  border-radius:50%; /* 円形にする */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ×印の文字色 */
  font-size:22px; /* ×印の文字サイズ */
  line-height:1; /* ×印の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* 閉じるボタンのホバー状態 */
.confirm-input-drawer_close:hover{
  background:#374151; /* ホバー時の背景色 */
}

/* =========================================
   入力フォーム
========================================= */

/* 入力フォーム全体 */
.confirm-input-drawer_form{
  display:grid; /* 入力項目を縦方向へ配置 */
  gap:16px; /* 入力項目同士の間隔 */
  margin:0; /* 外側余白を削除 */
  text-align:left; /* フォーム内容を左揃え */
}

/* 入力項目のラベル */
.confirm-input-drawer_label{
  display:grid; /* ラベルと入力欄を縦方向へ配置 */
  gap:8px; /* ラベルと入力欄の間隔 */
  margin:0; /* 外側余白を削除 */
  color:#374151; /* ラベルの文字色 */
  font-size:14px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベル文字の太さ */
  line-height:1.5; /* ラベルの行間 */
}

/* 一行入力欄と複数行入力欄 */
.confirm-input-drawer_input,
.confirm-input-drawer_textarea{
  display:block; /* 入力欄をブロック要素として表示 */
  width:100%; /* ドロワーの横幅に合わせる */
  margin:0; /* 外側余白を削除 */
  padding:12px; /* 入力欄内側の余白 */
  border:1px solid #d1d5db; /* 枠線の太さと色 */
  border-radius:8px; /* 入力欄の角丸 */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  line-height:1.5; /* 入力文字の行間 */
}

/* 入力欄のフォーカス状態 */
.confirm-input-drawer_input:focus,
.confirm-input-drawer_textarea:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,.15); /* フォーカス位置を示す外枠 */
}

/* お問い合わせ内容入力欄 */
.confirm-input-drawer_textarea{
  min-height:120px; /* お問い合わせ内容入力欄の最小高さ */
  resize:vertical; /* 縦方向のみサイズ変更を許可 */
}

/* 確認画面へ進むボタン */
.confirm-input-drawer_submit{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px; /* ボタン内側の余白 */
  border:none; /* 標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字の太さ */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* 確認画面へ進むボタンのホバー状態 */
.confirm-input-drawer_submit:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* =========================================
   入力内容確認画面
========================================= */

/* 入力内容確認エリア */
.confirm-input-drawer_confirm{
  display:none; /* 初期状態では非表示 */
  margin:0; /* 外側余白を削除 */
  padding:0; /* 内側余白を削除 */
  text-align:left; /* 内容を左揃え */
}

/* 確認画面のタイトル */
.confirm-input-drawer_confirm-title{
  display:block; /* ブロック要素として表示 */
  margin:0 0 20px; /* 下側20pxの余白 */
  padding:0; /* 内側余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:24px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字の太さ */
  line-height:1.5; /* タイトルの行間 */
}

/* 確認項目 */
.confirm-input-drawer_confirm-item{
  display:block; /* 確認項目を通常のブロック表示に固定 */
  width:100%; /* ドロワーの横幅に合わせる */
  height:auto; /* 内容に合わせた高さにする */
  min-height:0; /* 不要な最小高さを解除 */
  margin:0 0 14px; /* 下側14pxの余白 */
  padding:12px 14px; /* 確認項目内側の余白 */
  border:1px solid #e5e7eb; /* 枠線の太さと色 */
  border-radius:8px; /* 確認項目の角丸 */
  background:#f8fafc; /* 確認項目の背景色 */
  color:#374151; /* 確認内容の文字色 */
  line-height:1.7; /* 確認内容の行間 */
  overflow-wrap:anywhere; /* 長い文字列を折り返す */
  white-space:normal; /* 通常の改行方法で表示 */
}

/* 確認項目内の文字 */
.confirm-input-drawer_confirm-item span{
  position:static; /* 絶対配置などの影響を解除 */
  width:auto; /* 内容に合わせた横幅にする */
  height:auto; /* 内容に合わせた高さにする */
  margin:0; /* 外側余白を削除 */
  padding:0; /* 内側余白を削除 */
  transform:none; /* 拡大・移動などの影響を解除 */
}

/* 確認項目名 */
.confirm-input-drawer_confirm-label{
  display:block; /* 項目名を独立した行へ表示 */
  margin:0 0 4px; /* 下側4pxの余白 */
  color:#111827; /* 項目名の文字色 */
  font-size:14px; /* 項目名の文字サイズ */
  font-weight:700; /* 項目名の文字の太さ */
  line-height:1.5; /* 項目名の行間 */
}

/* お問い合わせ内容の改行を保持 */
[data-confirm-input-drawer-view-message]{
  display:block; /* ブロック要素として表示 */
  white-space:pre-wrap; /* 入力された改行を保持 */
}

/* 戻る・送信ボタンエリア */
.confirm-input-drawer_buttons{
  display:flex; /* 戻るボタンと送信ボタンを横並び */
  gap:12px; /* ボタン同士の間隔 */
  margin:20px 0 0; /* 上側20pxの余白 */
}

/* 戻る・送信ボタン共通 */
.confirm-input-drawer_buttons button{
  flex:1; /* 2つのボタンを同じ横幅にする */
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px; /* ボタン内側の余白 */
  border:none; /* 標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字の太さ */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

/* 入力フォームへ戻るボタン */
.confirm-input-drawer_back{
  background:#e5e7eb; /* 戻るボタンの背景色 */
  color:#111827; /* 戻るボタンの文字色 */
}

/* 戻るボタンのホバー状態 */
.confirm-input-drawer_back:hover{
  background:#d1d5db; /* ホバー時の背景色 */
}

/* 送信ボタン */
.confirm-input-drawer_send{
  background:#2563eb; /* 送信ボタンの背景色 */
  color:#ffffff; /* 送信ボタンの文字色 */
}

/* 送信ボタンのホバー状態 */
.confirm-input-drawer_send:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* デモ用の送信メッセージ */
.confirm-input-drawer_notice{
  display:none; /* 初期状態では非表示 */
  margin:20px 0 0; /* 上側20pxの余白 */
  padding:12px 14px; /* メッセージ内側の余白 */
  border-radius:8px; /* メッセージの角丸 */
  background:#eff6ff; /* メッセージの背景色 */
  color:#1e40af; /* メッセージの文字色 */
  line-height:1.7; /* メッセージの行間 */
}

/* デモ用送信メッセージの表示状態 */
.confirm-input-drawer_notice.is-active{
  display:block; /* 表示用クラスが付いた時に表示 */
}

/* =========================================
   ドロワー表示アニメーション
========================================= */

@keyframes confirm-input-drawer-slide{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 完全に透明な状態から開始 */
    transform:translateX(-100%); /* 左側の画面外から開始 */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 完全に表示 */
    transform:translateX(0); /* 元の位置へ移動 */
  }

}

/* =========================================
   スマートフォン対応
========================================= */

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

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小 */
  }

  /* スマートフォン用の操作エリア */
  .confirm-input-drawer_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 操作エリア内側の余白を縮小 */
  }

  /* スマートフォン用の開くボタン */
  .confirm-input-drawer_open{
    width:100%; /* ボタンを横幅いっぱいに広げる */
  }

  /* スマートフォン用のドロワーメニュー */
  .confirm-input-drawer{
    width:100%; /* ドロワーを画面幅いっぱいに表示 */
    max-width:100%; /* 最大横幅を画面幅に合わせる */
    padding:20px; /* ドロワー内側の余白を縮小 */
  }

  /* スマートフォン用のドロワータイトル */
  .confirm-input-drawer_heading,
  .confirm-input-drawer_confirm-title{
    font-size:21px; /* 小さい画面でタイトルを縮小 */
  }

  /* スマートフォン用の操作ボタン */
  .confirm-input-drawer_buttons{
    flex-direction:column; /* 戻るボタンと送信ボタンを縦並び */
  }

}

// ドロワーメニューを開くボタンを取得
const confirmInputDrawerOpen=document.querySelector(
  "[data-confirm-input-drawer-open]"
);

// ドロワーメニューを閉じるボタンを取得
const confirmInputDrawerClose=document.querySelector(
  "[data-confirm-input-drawer-close]"
);

// ドロワーメニュー表示時の背景を取得
const confirmInputDrawerOverlay=document.querySelector(
  "[data-confirm-input-drawer-overlay]"
);

// 入力フォームエリアを取得
const confirmInputDrawerFormArea=document.querySelector(
  "[data-confirm-input-drawer-form-area]"
);

// 入力内容確認エリアを取得
const confirmInputDrawerConfirmArea=document.querySelector(
  "[data-confirm-input-drawer-confirm-area]"
);

// お名前入力欄を取得
const confirmInputDrawerName=document.querySelector(
  "[data-confirm-input-drawer-name]"
);

// メールアドレス入力欄を取得
const confirmInputDrawerEmail=document.querySelector(
  "[data-confirm-input-drawer-email]"
);

// お問い合わせ内容入力欄を取得
const confirmInputDrawerMessage=document.querySelector(
  "[data-confirm-input-drawer-message]"
);

// お名前の確認表示欄を取得
const confirmInputDrawerViewName=document.querySelector(
  "[data-confirm-input-drawer-view-name]"
);

// メールアドレスの確認表示欄を取得
const confirmInputDrawerViewEmail=document.querySelector(
  "[data-confirm-input-drawer-view-email]"
);

// お問い合わせ内容の確認表示欄を取得
const confirmInputDrawerViewMessage=document.querySelector(
  "[data-confirm-input-drawer-view-message]"
);

// 確認画面へ進むボタンを取得
const confirmInputDrawerShow=document.querySelector(
  "[data-confirm-input-drawer-show]"
);

// 入力フォームへ戻るボタンを取得
const confirmInputDrawerBack=document.querySelector(
  "[data-confirm-input-drawer-back]"
);

// 送信ボタンを取得
const confirmInputDrawerSend=document.querySelector(
  "[data-confirm-input-drawer-send]"
);

// デモ用の送信メッセージを取得
const confirmInputDrawerNotice=document.querySelector(
  "[data-confirm-input-drawer-notice]"
);

// ドロワーメニューを開くボタンをクリックした時
confirmInputDrawerOpen.addEventListener("click",function(){

  // ドロワーメニューへ表示用クラスを追加
  confirmInputDrawerOverlay.classList.add("is-active");

  // ドロワーメニューが表示中であることを支援技術へ伝える
  confirmInputDrawerOverlay.setAttribute(
    "aria-hidden",
    "false"
  );

});

// ドロワーメニューを閉じるボタンをクリックした時
confirmInputDrawerClose.addEventListener("click",function(){

  // ドロワーメニューから表示用クラスを削除
  confirmInputDrawerOverlay.classList.remove("is-active");

  // ドロワーメニューが非表示であることを支援技術へ伝える
  confirmInputDrawerOverlay.setAttribute(
    "aria-hidden",
    "true"
  );

});

// ドロワーメニューの背景をクリックした時
confirmInputDrawerOverlay.addEventListener("click",function(event){

  // クリックされた要素が背景自身の場合だけ閉じる
  if(event.target===confirmInputDrawerOverlay){

    // ドロワーメニューから表示用クラスを削除
    confirmInputDrawerOverlay.classList.remove("is-active");

    // ドロワーメニューが非表示であることを支援技術へ伝える
    confirmInputDrawerOverlay.setAttribute(
      "aria-hidden",
      "true"
    );

  }

});

// 確認画面へ進むボタンをクリックした時
confirmInputDrawerShow.addEventListener("click",function(){

  // お名前の入力内容を確認表示欄へ反映
  confirmInputDrawerViewName.textContent=
    confirmInputDrawerName.value;

  // メールアドレスの入力内容を確認表示欄へ反映
  confirmInputDrawerViewEmail.textContent=
    confirmInputDrawerEmail.value;

  // お問い合わせ内容を確認表示欄へ反映
  confirmInputDrawerViewMessage.textContent=
    confirmInputDrawerMessage.value;

  // 前回表示した送信メッセージを非表示
  confirmInputDrawerNotice.classList.remove("is-active");

  // 入力フォームを非表示
  confirmInputDrawerFormArea.style.display="none";

  // 入力内容確認画面を表示
  confirmInputDrawerConfirmArea.style.display="block";

});

// 戻るボタンをクリックした時
confirmInputDrawerBack.addEventListener("click",function(){

  // 入力内容確認画面を非表示
  confirmInputDrawerConfirmArea.style.display="none";

  // 入力フォームを再表示
  confirmInputDrawerFormArea.style.display="grid";

});

// 送信ボタンをクリックした時
confirmInputDrawerSend.addEventListener("click",function(){

  // デモ用の送信メッセージを表示
  confirmInputDrawerNotice.classList.add("is-active");

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、ボタンをクリックすると画面左側から入力内容確認付きドロワーメニューを表示できます。HTMLで入力フォームと確認画面を構成し、CSSでドロワーメニューやフォーム全体のデザインを設定、JavaScriptで画面切り替えや入力内容の確認表示を制御しています。

フォームにはお名前・メールアドレス・お問い合わせ内容の入力欄を用意しており、「確認画面へ」を押すと入力内容を確認画面へ表示できます。「戻る」を押すと入力画面へ戻り、「送信する」を押すとデモ用メッセージを表示します。実際の送信処理は含まれていません。

HTML・CSS・JavaScriptを分離しているため、フォーム項目や確認画面の表示内容、ドロワーメニューのデザインや動作を用途に合わせて編集しやすい構成です。お問い合わせフォームや各種入力フォームの確認画面作成にも利用できます。

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

各ファイルの役割
index.html
ドロワーメニュー、入力フォーム、入力内容確認画面、各ボタンを配置しています。タイトル、説明文、入力項目、ボタンの文字などを変更できます。

style.css
ドロワーメニュー全体やフォーム、確認画面のレイアウトとデザインを設定しています。背景色、文字色、入力欄、ボタン、余白、角丸、影、ドロワーメニューの横幅などを変更できます。

script.js
ドロワーメニューの表示・非表示、入力内容の確認画面への反映、入力画面と確認画面の切り替え、デモ用メッセージの表示を制御しています。

設置方法・使い方
sampleフォルダを任意の場所へ配置し、sample/index.htmlをブラウザで開いてください。「フォームを表示」をクリックするとドロワーメニューが表示されます。フォームへ入力後、「確認画面へ」を押すと入力内容を確認できます。「送信する」を押しても、サンプルのため実際の送信処理は実行されません。

カスタマイズできる内容
index.htmlではタイトル、説明文、入力項目、ラベル、プレースホルダー、ボタンの文字を変更できます。style.cssでは背景色、文字色、入力欄、ボタン、余白、角丸、影、ドロワーメニューの横幅などを自由に調整できます。script.jsではドロワーメニューの開閉や確認画面への切り替え処理、送信時の処理を変更できます。

数値調整
style.cssのwidth:420pxはドロワーメニューの横幅です。paddingを変更すると余白、border-radiusを変更すると角丸の大きさが変わります。transition:0.2s;はボタンのアニメーション時間を表しており、値を大きくするとゆっくり、小さくすると速く変化します。animation:0.35s;を変更するとドロワーメニューが表示される速度を調整できます。

レスポンシブ対応
style.cssではwidth:100%、max-width、@mediaを利用してレスポンシブ対応しています。画面サイズに応じてドロワーメニューや余白、フォームレイアウトを自動調整するため、スマートフォン・タブレット・PCで利用できます。