基本のステップバーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

基本のステップバーをHTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、「次へ」「戻る」ボタンを押すだけで現在のステップが切り替わり、進行状況を分かりやすく表示できます。JavaScriptで現在位置に応じたクラスを付け替えるシンプルな仕組みのため、初心者でも動作を理解しやすく、さまざまな画面へ応用しやすい構成です。

ステップバーは会員登録、商品購入、お問い合わせ、予約フォーム、アンケートなど、複数の手順を順番に進めるページでよく利用されています。現在どの工程まで完了したのか、あと何ステップ残っているのかを視覚的に伝えられるため、利用者が迷いにくくなり、入力途中で離脱してしまうことを防ぐ効果も期待できます。

HTMLではステップ名やボタンを編集でき、CSSでは色、サイズ、余白、丸いアイコン、進行ラインなどのデザインを変更できます。JavaScriptでは現在のステップを管理し、「次へ」「戻る」のクリックに合わせて表示を更新します。スマートフォン・タブレット・PCでも利用できるため、さまざまなWebサイトへ導入しやすい基本的なステップバーです。

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

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

デモ

お申し込み手順

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

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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではステップバーのレイアウトと「次へ」「戻る」ボタンを配置し、CSSではステップバー全体のデザインや現在・完了ステップの見た目を設定します。JavaScriptでは現在のステップ番号を管理し、ボタンを押すたびにステップの表示状態を切り替えます。ファイルごとに役割を分けているため、初心者でも編集しやすく、実際のWebサイトへ導入しやすい構成です。

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

各ファイルの役割
index.htmlはステップバー全体の構造を作成するファイルです。タイトル、説明文、ステップ名、ボタンの表示内容を変更できます。

style.cssはステップバーのデザインを設定するファイルです。横幅、余白、色、角丸、ステップ番号、ライン、ボタンなどの見た目を変更できます。

script.jsはステップバーの動作を制御するファイルです。「次へ」「戻る」ボタンを押したときに現在のステップを切り替え、完了済み・現在の状態を更新します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「次へ」「戻る」ボタンを押すと現在のステップが切り替わり、進行状況を確認できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、各ステップ名、ボタンの文字を変更できます。

style.cssでは全体の横幅、背景色、文字色、ラインの色、ステップ番号のサイズ、角丸、余白、ボタンの色などを自由に変更できます。

script.jsでは初期表示するステップやステップ数に合わせた動作を変更できます。

数値調整
style.css
max-width:900px;
ステップバー全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

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

width:44px; / height:44px;
ステップ番号の丸いアイコンの大きさです。値を変更すると円のサイズが変わります。

height:4px;
ステップ間を結ぶラインの太さです。値を大きくすると太く、小さくすると細くなります。

gap:16px;
「戻る」「次へ」ボタンの間隔です。値を大きくするとボタン同士が離れ、小さくすると近付きます。

script.js
let currentStep=0;
初期表示するステップ番号です。0は1番目、1は2番目、2は3番目を表します。変更すると表示開始位置が変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxにより画面幅に合わせて縮小表示されます。また、640px以下ではpadding:24px 18px;とステップ名の文字サイズを調整しているため、スマートフォン・タブレット・PCで快適に利用できます。