基本のステップバーを作る方法

ステップ数・ラベル・現在位置・サイズ・色・線・ボタンなどを設定して、HTML・CSS・JavaScriptを自動生成できます。

「次へ」「戻る」のボタンで現在のステップを切り替えられる、基本のステップバーの作り方を紹介します。操作に合わせて進行状況が更新されるため、複数の手順を順番に進める画面で、現在どの段階にいるのかを分かりやすく表示できます。

今回のデモでは、「入力」「確認」「完了」の3段階を横並びに配置しています。「次へ」を押すと次のステップへ進み、「戻る」を押すと前のステップへ移動します。現在のステップは青い枠線の円で表示され、通過したステップは円と接続線が青色に変わります。

最初のステップでは「戻る」、最後のステップでは「次へ」が無効になり、操作できない状態になります。これにより、最初の段階より前に戻ったり、最後の段階を超えて進んだりすることを防ぎます。

ステップの切り替えにはJavaScriptを使用し、現在位置に応じてHTMLのクラスを変更しています。ステップ名や段階数を変更することで、お申し込み手順や会員登録など、さまざまな進行状況の表示に応用できます。

デモ

お申し込み手順

「次へ」「戻る」を押して現在のステップを切り替えられます。

1

入力
2

確認
3

完了

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

<!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="basic-step-bar_wrap">

    <!-- タイトル -->
    <div class="basic-step-bar_title">
      お申し込み手順
    </div>

    <!-- 説明文 -->
    <p class="basic-step-bar_text">
      「次へ」「戻る」を押して現在のステップを切り替えられます。
    </p>

    <!-- ステップ一覧 -->
    <ol class="basic-step-bar_list">

      <!-- ステップ1 -->
      <li class="basic-step-bar_item">

        <div class="basic-step-bar_circle">
          1
        </div>

        <div class="basic-step-bar_label">
          入力
        </div>

      </li>

      <!-- ステップ2 -->
      <li class="basic-step-bar_item">

        <div class="basic-step-bar_circle">
          2
        </div>

        <div class="basic-step-bar_label">
          確認
        </div>

      </li>

      <!-- ステップ3 -->
      <li class="basic-step-bar_item">

        <div class="basic-step-bar_circle">
          3
        </div>

        <div class="basic-step-bar_label">
          完了
        </div>

      </li>

    </ol>

    <!-- 操作ボタン -->
    <div class="basic-step-bar_buttons">

      <button
        type="button"
        id="prev-button">
        戻る
      </button>

      <button
        type="button"
        id="next-button">
        次へ
      </button>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との余白が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本の文字色 */
  font-family:sans-serif; /* 使用フォント */
}

/* ステップバー全体 */
.basic-step-bar_wrap{
  width:100%; /* 画面幅に応じて縮小する */
  max-width:900px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40px・左右中央配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 外枠 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 背景色 */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* タイトル */
.basic-step-bar_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* タイトルサイズ */
  font-weight:700; /* 太字 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.basic-step-bar_text{
  margin:0 0 30px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* ステップ一覧 */
.basic-step-bar_list{
  display:flex; /* 横並び */
  justify-content:space-between; /* 均等配置 */
  margin:0;
  padding:0;
  list-style:none; /* リストマーカー非表示 */
}

/* 各ステップ */
.basic-step-bar_item{
  position:relative;
  flex:1; /* 均等幅 */
  text-align:center;
}

/* ステップ間のライン */
.basic-step-bar_item:not(:last-child)::after{
  content:"";
  position:absolute;
  top:20px; /* ラインの高さ */
  left:50%;
  width:100%; /* ラインの長さ */
  height:4px; /* ラインの太さ */
  background:#d1d5db;
}

/* ステップ番号 */
.basic-step-bar_circle{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; /* 丸の大きさ */
  height:44px; /* 丸の大きさ */
  margin:0 auto;
  border:4px solid #d1d5db; /* 枠線 */
  border-radius:50%; /* 円形 */
  background:#ffffff;
  color:#6b7280;
  font-size:16px; /* 数字サイズ */
  font-weight:700;
  box-sizing:border-box;
}

/* ステップ名 */
.basic-step-bar_label{
  margin-top:12px; /* 丸との間隔 */
  color:#6b7280;
  font-size:15px; /* 文字サイズ */
  font-weight:700;
}

/* 完了したステップ */
.basic-step-bar_item.is-complete .basic-step-bar_circle{
  background:#2563eb;
  border-color:#2563eb;
  color:#ffffff;
}

/* 完了したライン */
.basic-step-bar_item.is-complete::after{
  background:#2563eb;
}

/* 現在のステップ */
.basic-step-bar_item.is-current .basic-step-bar_circle{
  border-color:#2563eb;
  color:#2563eb;
}

/* 現在・完了ステップの文字色 */
.basic-step-bar_item.is-current .basic-step-bar_label,
.basic-step-bar_item.is-complete .basic-step-bar_label{
  color:#111827;
}

/* ボタンエリア */
.basic-step-bar_buttons{
  display:flex;
  justify-content:center;
  gap:16px; /* ボタン間隔 */
  margin-top:36px; /* 上余白 */
}

/* ボタン */
.basic-step-bar_buttons button{
  padding:12px 22px; /* 内側余白 */
  border:none;
  border-radius:8px; /* 角丸 */
  background:#2563eb;
  color:#ffffff;
  font-size:15px;
  cursor:pointer;
}

/* 無効ボタン */
.basic-step-bar_buttons button:disabled{
  background:#9ca3af;
  cursor:default;
}

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

  /* ステップバー全体 */
  .basic-step-bar_wrap{
    padding:24px 18px; /* スマートフォンでは余白を小さくする */
  }

  /* ステップ名 */
  .basic-step-bar_label{
    font-size:13px; /* スマートフォンでは文字を少し小さくする */
  }

}

/* 現在表示中のステップ番号 */
let currentStep=0;

/* ステップ要素を取得 */
const stepItems=document.querySelectorAll(".basic-step-bar_item");

/* 戻るボタン */
const prevButton=document.getElementById("prev-button");

/* 次へボタン */
const nextButton=document.getElementById("next-button");

/* ステップ表示を更新する */
function updateStep(){

  /* 全ステップを更新 */
  stepItems.forEach((item,index)=>{

    /* 状態を一旦リセット */
    item.classList.remove("is-complete","is-current");

    /* 現在より前は完了 */
    if(index<currentStep){
      item.classList.add("is-complete");
    }

    /* 現在のステップ */
    else if(index===currentStep){
      item.classList.add("is-current");
    }

  });

  /* 最初のステップでは戻るボタンを無効化 */
  prevButton.disabled=currentStep===0;

  /* 最後のステップでは次へボタンを無効化 */
  nextButton.disabled=currentStep===stepItems.length-1;

}

/* 次へボタン */
nextButton.addEventListener("click",()=>{

  /* 最後まで進んでいなければ次へ進む */
  if(currentStep<stepItems.length-1){

    currentStep++;

    updateStep();

  }

});

/* 戻るボタン */
prevButton.addEventListener("click",()=>{

  /* 最初より後なら1つ戻る */
  if(currentStep>0){

    currentStep--;

    updateStep();

  }

});

/* 初期表示 */
updateStep();

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

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

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

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

ファイル構成と設置方法

今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLでは3段階のステップバーと「次へ」「戻る」のボタンを配置し、CSSではステップ番号・接続線・ボタンのデザインを設定しています。JavaScriptでは現在のステップを管理し、ボタン操作に合わせて進行状況の表示を更新しています。

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

各ファイルの役割
index.htmlには、ステップ番号とステップ名を表示する一覧、前後へ移動する操作ボタンを記述しています。style.cssでは、ステップバーの横幅・余白・円・接続線・文字色などを設定しています。script.jsでは、現在のステップ番号を管理し、完了済みと現在のステップを区別するクラスの切り替えや、操作ボタンの有効・無効を制御しています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置します。
index.htmlをブラウザで開くと、「入力」「確認」「完了」の3段階が表示されます。「次へ」をクリックすると次のステップへ進み、「戻る」をクリックすると前のステップへ移動します。最初のステップでは「戻る」、最後のステップでは「次へ」が無効になります。

現在のステップを管理する仕組み
script.jsでは、変数currentStepを使用して現在のステップ番号を管理しています。ステップ番号は0から始まり、最初の「入力」が0、次の「確認」が1、最後の「完了」が2になります。
また、querySelectorAll()でステップ一覧を取得し、getElementById()で操作ボタンを取得しています。

/* 現在表示中のステップ番号 */
let currentStep=0;

/* ステップ要素を取得 */
const stepItems=document.querySelectorAll(".basic-step-bar_item");

/* 戻るボタン */
const prevButton=document.getElementById("prev-button");

/* 次へボタン */
const nextButton=document.getElementById("next-button");

currentStep=0は、最初のステップを初期位置にする設定です。初期表示を2番目のステップに変更したい場合は1、3番目に変更したい場合は2を指定します。
stepItemsには、.basic-step-bar_itemが指定されたすべてのステップ要素が入ります。prevButtonとnextButtonには、それぞれ「戻る」「次へ」のボタン要素が入ります。
HTML側のボタンIDを変更する場合は、JavaScriptのgetElementById()に指定する文字列も一致させてください。

現在のステップと完了したステップを切り替える方法
ステップの進行状況は、updateStep()関数で更新しています。各ステップのクラスを一度削除し、現在位置に応じてis-completeまたはis-currentを追加しています。

/* ステップ表示を更新する */
function updateStep(){

  /* 全ステップを更新 */
  stepItems.forEach((item,index)=>{

    /* 状態を一旦リセット */
    item.classList.remove("is-complete","is-current");

    /* 現在より前は完了 */
    if(index<currentStep){
      item.classList.add("is-complete");
    }

    /* 現在のステップ */
    else if(index===currentStep){
      item.classList.add("is-current");
    }

  });

  /* 最初のステップでは戻るボタンを無効化 */
  prevButton.disabled=currentStep===0;

  /* 最後のステップでは次へボタンを無効化 */
  nextButton.disabled=currentStep===stepItems.length-1;

}

forEach()では、各ステップ要素を順番に処理しています。indexはステップの位置を表し、最初の要素が0、2番目が1、3番目が2になります。
index<currentStepの場合は通過済みとしてis-completeを追加し、index===currentStepの場合は現在位置としてis-currentを追加します。
これらのクラスに対応するCSSによって、完了したステップは青い円と接続線、現在のステップは青い枠線の円で表示されます。

「次へ」「戻る」でステップを移動する方法
操作ボタンにはclickイベントを設定しています。「次へ」をクリックするとcurrentStepを1増やし、「戻る」をクリックすると1減らします。変更後はupdateStep()を実行して表示を更新します。

/* 次へボタン */
nextButton.addEventListener("click",()=>{

  /* 最後まで進んでいなければ次へ進む */
  if(currentStep<stepItems.length-1){

    currentStep++;

    updateStep();

  }

});

/* 戻るボタン */
prevButton.addEventListener("click",()=>{

  /* 最初より後なら1つ戻る */
  if(currentStep>0){

    currentStep--;

    updateStep();

  }

});

currentStep++は現在位置を1つ進める処理、currentStep--は1つ戻す処理です。
stepItems.lengthはステップの総数を表します。今回のサンプルでは3です。最後のステップの位置はstepItems.length-1で判定しているため、ステップ数を変更しても最後の位置を自動的に判定できます。
ただし、このサンプルはステップバーの表示を切り替えるものであり、入力フォームの内容確認や送信処理は含まれていません。

最初と最後のステップでボタンを無効にする方法
updateStep()関数では、disabledプロパティを使用して操作ボタンの状態を切り替えています。

/* 最初のステップでは戻るボタンを無効化 */
prevButton.disabled=currentStep===0;

/* 最後のステップでは次へボタンを無効化 */
nextButton.disabled=currentStep===stepItems.length-1;

currentStep===0の場合は「戻る」が無効になり、currentStep===stepItems.length-1の場合は「次へ」が無効になります。
無効になったボタンにはCSSの:disabledが適用され、背景色が灰色に変わります。ステップを移動すると、必要に応じて再び操作できる状態になります。

ステップの数や表示名を変更する方法
ステップの表示名は、index.htmlの.basic-step-bar_label内の文字を変更してください。番号は.basic-step-bar_circle内の文字で指定しています。
ステップを追加する場合は、.basic-step-bar_list内に同じ構造のli要素を追加します。

<!-- 追加するステップの例 -->
<li class="basic-step-bar_item">

  <div class="basic-step-bar_circle">
    4
  </div>

  <div class="basic-step-bar_label">
    お支払い
  </div>

</li>

追加したステップもquerySelectorAll(".basic-step-bar_item")で取得されるため、JavaScript側でステップ数を指定し直す必要はありません。
ただし、ステップの並び順や表示名はHTMLに記述した内容がそのまま反映されます。追加・削除した場合は、番号や手順の順番も合わせて調整してください。

ステップの円と接続線を調整する方法
ステップ番号を囲む円は.basic-step-bar_circle、ステップ同士をつなぐ線は.basic-step-bar_item:not(:last-child)::afterで設定しています。

/* ステップ間のライン */
.basic-step-bar_item:not(:last-child)::after{
  content:"";
  position:absolute;
  top:20px; /* ラインの高さ */
  left:50%;
  width:100%; /* ラインの長さ */
  height:4px; /* ラインの太さ */
  background:#d1d5db;
}

/* ステップ番号 */
.basic-step-bar_circle{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; /* 丸の大きさ */
  height:44px; /* 丸の大きさ */
  margin:0 auto;
  border:4px solid #d1d5db; /* 枠線 */
  border-radius:50%; /* 円形 */
  background:#ffffff;
  color:#6b7280;
  font-size:16px; /* 数字サイズ */
  font-weight:700;
  box-sizing:border-box;
}

円の大きさはwidth:44px;とheight:44px;で設定しています。両方を同じ数値に変更すると、円形を維持したまま大きさを調整できます。
border:4px solid #d1d5db;の4pxは円の枠線の太さ、接続線のheight:4px;は線の太さです。
円の大きさを変更した場合は、接続線のtop:20px;も調整してください。円と接続線の中心位置を揃えることで、自然なつながりになります。

ステップの色を変更する方法
完了したステップと現在のステップには、is-completeとis-currentのクラスに対応したCSSが適用されます。

/* 完了したステップ */
.basic-step-bar_item.is-complete .basic-step-bar_circle{
  background:#2563eb;
  border-color:#2563eb;
  color:#ffffff;
}

/* 完了したライン */
.basic-step-bar_item.is-complete::after{
  background:#2563eb;
}

/* 現在のステップ */
.basic-step-bar_item.is-current .basic-step-bar_circle{
  border-color:#2563eb;
  color:#2563eb;
}

#2563ebは進行状況を示す青色です。別の色に変更する場合は、完了した円の背景・枠線・接続線と、現在の円の枠線・数字に使用している色を変更してください。
未完了のステップには、通常時の.basic-step-bar_circleと接続線の設定が適用されます。未完了部分の色を変更したい場合は、#d1d5dbを調整してください。

操作ボタンの大きさと間隔を変更する方法
「次へ」「戻る」のボタンは.basic-step-bar_buttons buttonで設定しています。ボタン同士の間隔は、親要素の.basic-step-bar_buttonsで調整できます。

/* ボタンエリア */
.basic-step-bar_buttons{
  display:flex;
  justify-content:center;
  gap:16px; /* ボタン間隔 */
  margin-top:36px; /* 上余白 */
}

/* ボタン */
.basic-step-bar_buttons button{
  padding:12px 22px; /* 内側余白 */
  border:none;
  border-radius:8px; /* 角丸 */
  background:#2563eb;
  color:#ffffff;
  font-size:15px;
  cursor:pointer;
}

gap:16px;を大きくするとボタン同士の間隔が広がり、小さくすると狭くなります。margin-top:36px;はステップ一覧とボタンの間隔です。
padding:12px 22px;はボタンの内側余白で、上下12px・左右22pxを指定しています。数値を大きくするとボタンが大きくなります。
border-radius:8px;は角丸、font-size:15px;はボタン内の文字サイズです。

レスポンシブ対応
style.cssでは、ステップバー全体にwidth:100%;とmax-width:900px;を指定しています。これにより、広い画面では最大900pxまで表示し、狭い画面では設置先の横幅に合わせて縮小します。
画面幅が640px以下になると、内側の余白とステップ名の文字サイズを小さくしています。

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

  /* ステップバー全体 */
  .basic-step-bar_wrap{
    padding:24px 18px; /* スマートフォンでは余白を小さくする */
  }

  /* ステップ名 */
  .basic-step-bar_label{
    font-size:13px; /* スマートフォンでは文字を少し小さくする */
  }

}

通常時の内側余白は32pxですが、画面幅640px以下では上下24px・左右18pxに変更されます。
ステップ名の文字サイズは通常時の15pxから13pxになり、スマートフォンでも3つのステップを横並びで表示します。
ステップ数を増やして文字が収まりにくくなった場合は、メディアクエリ内の文字サイズや余白を調整してください。