コピペで完結！タブ切替 #15【入力フォーム用ステップ式タブ】

/* ============================
   フォーム用タブUI（CSS）
   目的：長い入力フォームをステップごとに分割し、
         タブ切替で進められるようにする見た目の定義
   対象スコープ：#form-tabs 配下のみ
   ============================ */

/* ----------------------------
   タブボタンの横並びコンテナ
   ・タブを横並びにし、間隔と下マージンを付ける
   ---------------------------- */
#form-tabs .tabs{
  display:flex;       /* 横並び（フレックスレイアウト）にする */
  gap:8px;            /* 個々のタブボタンの間隔（8px） */
  margin-bottom:16px; /* タブ列の下に余白（下のパネルと離す） */
}

/* ----------------------------
   個々のタブの基本スタイル
   ・等幅化、押しやすさ、視認性を確保
   ---------------------------- */
#form-tabs .tab{
  flex:1;                 /* すべてのタブを等幅に伸ばす（比率=1） */
  padding:8px;            /* クリックしやすい内側余白 */
  border:1px solid #ccc;  /* 薄い枠線でボタン境界を明示 */
  border-radius:6px;      /* 角丸でやわらかい印象に */
  background:#f8f9fa;     /* 薄いグレー背景（非アクティブ時） */
  cursor:pointer;         /* ホバー時にポインタ形状へ */
  text-align:center;      /* ラベル文字を中央揃えに */
  /* 追加検討：transitionで色変化を滑らかに
     transition: background .2s, border-color .2s, color .2s; */
}

/* ----------------------------
   アクティブタブの見た目
   ・強調色で現在位置を明確にする
   ---------------------------- */
#form-tabs .tab.active{
  background:#0b6bff;  /* 強調（アクセント）背景色 */
  color:#fff;          /* 文字色は白でコントラスト確保 */
  border-color:#0b6bff;/* 枠線も背景色に合わせて統一 */
  /* アクセシビリティ補足：
     コントラスト比が十分か確認。必要なら色を調整してください。 */
}

/* ----------------------------
   パネルのデフォルト状態
   ・非表示にしておき、アクティブ時のみ表示
   ---------------------------- */
#form-tabs .panel{
  display:none; /* JSで .active を付けるまで見せない */
}

/* ----------------------------
   アクティブなパネルの見た目
   ・カード風に枠と余白を与えて読みやすく
   ---------------------------- */
#form-tabs .panel.active{
  display:block;          /* 表示に切替（タブ操作で付与される） */
  border:1px solid #ddd;  /* 薄い枠線で領域を区切る */
  padding:16px;           /* 内側余白で密集感を解消 */
  border-radius:6px;      /* 角丸で視覚的にソフトに */
  /* 追加検討：背景色を白に固定したい場合
     background:#fff; */
}

/* ----------------------------
   ラベル
   ・入力欄の見出しをブロック化し余白を整える
   ---------------------------- */
#form-tabs label{
  display:block;     /* ラベルを行要素として扱う（改行される） */
  margin:12px 0 4px; /* 上12px・下4pxの余白で呼吸スペース確保 */
}

/* ----------------------------
   入力欄
   ・幅・パディングを指定し使いやすく
   ---------------------------- */
#form-tabs input{
  padding:6px;          /* クリック／タップしやすい内側余白 */
  width:100%;           /* 親幅に合わせて広げる（狭い画面でも馴染む） */
  max-width:300px;      /* ただし読みやすさのため最大幅は300pxに制限 */
  /* 追加検討：枠線や角丸を統一したい場合
     border:1px solid #cbd5e1;
     border-radius:6px; */
  /* 追加検討：フォーカスリングの明示
     outline-color:#0b6bff; */
}

/* ----------------------------
   パネル内の操作ボタン行
   ・次へ／戻るボタンの上に余白
   ---------------------------- */
#form-tabs .actions{
  margin-top:16px; /* 入力群とボタン群の間隔を空ける */
}

/* ----------------------------
   ボタン共通
   ・最小の押しやすさと余白、並びの間隔を付与
   ---------------------------- */
#form-tabs button{
  padding:8px 14px;     /* ボタンのタップ領域を確保 */
  margin-right:8px;     /* 横並び時の間隔（最後の一つは無視でOK） */
  cursor:pointer;       /* クリック可能であることを示す */
  /* 追加検討：見た目を主ボタン/副ボタンで切替える場合
     &.primary{ background:#0b6bff; color:#fff; border:1px solid #0b6bff; }
     &.ghost{ background:transparent; color:#0b6bff; border:1px solid #0b6bff; } */
}

<!-- ============================
     フォーム用タブUI（HTML構造）
     ============================ -->
<div id="form-tabs">

  <!-- タブボタン群 -->
  <div class="tabs">
    <div class="tab active" data-target="step1">① 基本情報</div>
    <div class="tab" data-target="step2">② 住所</div>
    <div class="tab" data-target="step3">③ 確認</div>
  </div>

  <!-- ステップ1 -->
  <div class="panel active" id="step1">
    <label>お名前</label>
    <input type="text" placeholder="山田太郎">
    <label>メールアドレス</label>
    <input type="email" placeholder="example@mail.com">
    <div class="actions">
      <button class="next" data-next="step2">次へ →</button>
    </div>
  </div>

  <!-- ステップ2 -->
  <div class="panel" id="step2">
    <label>住所</label>
    <input type="text" placeholder="東京都〇〇区…">
    <label>電話番号</label>
    <input type="tel" placeholder="090-1234-5678">
    <div class="actions">
      <button class="prev" data-prev="step1">← 戻る</button>
      <button class="next" data-next="step3">次へ →</button>
    </div>
  </div>

  <!-- ステップ3 -->
  <div class="panel" id="step3">
    <p>入力内容をご確認ください。</p>
    <div class="actions">
      <button class="prev" data-prev="step2">← 戻る</button>
      <button>送信</button>
    </div>
  </div>

</div>

// ============================
// フォーム用タブUI（JS制御）
// ============================

/* ---------------------------------------------------------
  即時実行関数（IIFE）
  - グローバル汚染を避けるため、このスコープ内に処理を閉じ込める
  - ページ読み込み後にすぐ実行される
--------------------------------------------------------- */
(function(){
  /* -------------------------------------------------------
    ルート要素の取得
    - フォーム用タブUI全体を内包するコンテナ
    - 見つからなければ安全に処理を中断
  ------------------------------------------------------- */
  const root = document.getElementById('form-tabs');
  if(!root) return;

  /* -------------------------------------------------------
    タブ・パネル要素の参照を取得
    - tabs: 上部に並ぶタブボタン群（.tab）
    - panels: 対応する内容領域（.panel）
    - いずれも NodeList だが、forEach が使える
  ------------------------------------------------------- */
  const tabs = root.querySelectorAll('.tab');     // タブ一覧
  const panels = root.querySelectorAll('.panel'); // パネル一覧

  /* -------------------------------------------------------
    タブ切替処理
    - 引数 targetId に一致するタブ／パネルを「active」状態にし、
      それ以外を非アクティブへ
    - 見た目の切替は CSS 側（.active に結びついたスタイル）で実現
  ------------------------------------------------------- */
  // タブ切替処理
  function activate(targetId){
    // それぞれのタブに対し、data-target が一致する要素だけ active クラスを付与
    tabs.forEach(t => t.classList.toggle('active', t.dataset.target === targetId));
    // それぞれのパネルに対し、id が一致する要素だけ active クラスを付与
    panels.forEach(p => p.classList.toggle('active', p.id === targetId));
  }

  /* -------------------------------------------------------
    タブクリック時の挙動
    - 各タブをクリックすると、そのタブの data-target 先へ切り替え
    - data-target の値（例: "step2"）が activate の引数 targetId になる
  ------------------------------------------------------- */
  // タブクリックで切替
  tabs.forEach(tab => {
    tab.addEventListener('click', () => activate(tab.dataset.target));
  });

  /* -------------------------------------------------------
    次へ・戻るボタンのデリゲーション
    - root（共通の親）にイベントを付与して、子要素のクリックを拾う
    - .next ボタン: data-next 属性に書かれたパネル id へ切替
    - .prev ボタン: data-prev 属性に書かれたパネル id へ切替
    - パネル内のボタンが増減してもリスナー追加が不要（保守性◎）
  ------------------------------------------------------- */
  // 次へ・戻るボタンで切替
  root.addEventListener('click', e => {
    // 「次へ」ボタン：data-next で指定された id に切替
    if(e.target.matches('.next')){
      activate(e.target.dataset.next);
    }
    // 「戻る」ボタン：data-prev で指定された id に切替
    if(e.target.matches('.prev')){
      activate(e.target.dataset.prev);
    }
  });
})();