JavaScriptを使わず、HTMLとCSSだけで現在のステップを切り替えられるステップバーの作り方を紹介します。「次へ」「戻る」のボタンをクリックすると、3つのステップを順番に進めたり、前のステップへ戻ったりできます。
今回のデモでは、「入力」「確認」「完了」の3段階を表示しています。現在のステップは青い枠線の円で示され、通過したステップは円の背景と接続線が青色に変わります。操作に合わせて表示が更新されるため、どこまで進んだのかを視覚的に確認できます。
最初のステップでは「戻る」、最後のステップでは「次へ」が操作できない表示になります。ステップの切り替えにはHTMLのラジオボタンとCSSを利用しており、JavaScriptを使用せずに進行状況を表現できます。
デモ
「次へ」「戻る」をクリックすると、HTMLとCSSだけで現在のステップを切り替えられます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけでステップバー</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ステップバー全体 -->
<div class="html-css-step-bar_wrap">
<!-- タイトル -->
<div class="html-css-step-bar_title">
お申し込み手順
</div>
<!-- 説明文 -->
<p class="html-css-step-bar_text">
「次へ」「戻る」をクリックすると現在のステップが切り替わります。
</p>
<!-- 現在のステップを管理するラジオボタン -->
<input
class="html-css-step-bar_radio"
type="radio"
name="step"
id="step1"
checked>
<input
class="html-css-step-bar_radio"
type="radio"
name="step"
id="step2">
<input
class="html-css-step-bar_radio"
type="radio"
name="step"
id="step3">
<!-- ステップ一覧 -->
<ol class="html-css-step-bar_list">
<li class="html-css-step-bar_item">
<div class="html-css-step-bar_circle">1</div>
<div class="html-css-step-bar_label">入力</div>
</li>
<li class="html-css-step-bar_item">
<div class="html-css-step-bar_circle">2</div>
<div class="html-css-step-bar_label">確認</div>
</li>
<li class="html-css-step-bar_item">
<div class="html-css-step-bar_circle">3</div>
<div class="html-css-step-bar_label">完了</div>
</li>
</ol>
<!-- 操作ボタン -->
<div class="html-css-step-bar_controls">
<div class="html-css-step-bar_control step1">
<span class="html-css-step-bar_disabled">
戻る
</span>
<label
class="html-css-step-bar_button"
for="step2">
次へ
</label>
</div>
<div class="html-css-step-bar_control step2">
<label
class="html-css-step-bar_button"
for="step1">
戻る
</label>
<label
class="html-css-step-bar_button"
for="step3">
次へ
</label>
</div>
<div class="html-css-step-bar_control step3">
<label
class="html-css-step-bar_button"
for="step2">
戻る
</label>
<span class="html-css-step-bar_disabled">
次へ
</span>
</div>
</div>
</div>
</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、HTMLとCSSの2つのファイルで構成されています。HTMLでは3段階のステップバーと「次へ」「戻る」の操作ボタンを配置し、CSSでは現在のステップや通過済みのステップに応じて、円・接続線・文字色を切り替えています。JavaScriptを使用せず、ラジオボタンの選択状態によって表示を制御しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlには、現在のステップを管理するラジオボタン、番号付きのステップ一覧、前後へ移動する操作ボタンを記述しています。
style.cssでは、ステップバーの配置・円のデザイン・接続線・ボタンの表示切り替えを設定しています。画面幅に応じた余白や文字サイズの調整も、このファイルで行っています。
設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.htmlとstyle.cssを同じ階層に配置します。
index.htmlをブラウザで開くと、3段階のステップバーが表示されます。「次へ」をクリックすると次のステップへ進み、「戻る」をクリックすると前のステップへ移動します。
最初のステップでは「戻る」、最後のステップでは「次へ」が灰色で表示され、操作できない状態になります。
ラジオボタンで現在のステップを管理する仕組み
index.htmlでは、3つのラジオボタンを使用して現在のステップを管理しています。すべてに同じname="step"を指定しているため、同時に選択できるのは1つだけです。
<!-- 現在のステップを管理するラジオボタン -->
<input
class="html-css-step-bar_radio"
type="radio"
name="step"
id="step1"
checked>
<input
class="html-css-step-bar_radio"
type="radio"
name="step"
id="step2">
<input
class="html-css-step-bar_radio"
type="radio"
name="step"
id="step3">
checkedを指定したstep1が初期状態で選択されるため、ページを開いた直後は「入力」が現在のステップとして表示されます。
ラジオボタンは画面上に表示されませんが、選択状態は保持されています。style.cssでは、:checkedを使用して、どのラジオボタンが選択されているかを判定しています。
「次へ」「戻る」でステップを切り替える方法
操作ボタンにはlabel要素を使用しています。for属性にラジオボタンのIDを指定すると、ボタンをクリックした際に対応するラジオボタンが選択されます。
<div class="html-css-step-bar_control step2">
<label
class="html-css-step-bar_button"
for="step1">
戻る
</label>
<label
class="html-css-step-bar_button"
for="step3">
次へ
</label>
</div>
このコードは2番目のステップで表示する操作ボタンです。「戻る」はstep1、「次へ」はstep3を選択します。
style.cssでは、各ステップの操作ボタンを初期状態で非表示にし、選択されているラジオボタンに対応したものだけを表示しています。
/* ステップごとのボタン */
.html-css-step-bar_control{
display:none;
justify-content:center;
gap:16px;
}
/* ステップ2 */
#step2:checked ~ .html-css-step-bar_controls .step2{
display:flex;
}
display:none;によって操作ボタンを非表示にし、#step2:checkedの条件を満たしたときだけ、.step2をdisplay:flex;で表示します。
ほかのステップにも同じ仕組みが設定されているため、ラジオボタンの選択に合わせて操作ボタンが切り替わります。
ボタン同士の間隔を変更したい場合は、gap:16px;を調整してください。数値を大きくすると間隔が広がり、小さくすると狭くなります。
現在のステップと通過済みのステップを色分けする方法
現在のステップは青い枠線と青い数字で表示し、通過済みのステップは円の背景を青色、数字を白色に変更しています。
例えば2番目のステップが選択されている場合、style.cssでは次の設定が適用されます。
/* ステップ2 */
#step2:checked ~ .html-css-step-bar_list .html-css-step-bar_item:nth-child(1)::after{
background:#2563eb;
}
#step2:checked ~ .html-css-step-bar_list .html-css-step-bar_item:nth-child(1) .html-css-step-bar_circle{
background:#2563eb;
border-color:#2563eb;
color:#ffffff;
}
#step2:checked ~ .html-css-step-bar_list .html-css-step-bar_item:nth-child(2) .html-css-step-bar_circle{
border-color:#2563eb;
color:#2563eb;
}
nth-child(1)は最初のステップ、nth-child(2)は2番目のステップを指定しています。
最初のステップは通過済みとして青く塗りつぶされ、2番目のステップは現在位置として青い枠線で表示されます。また、最初のステップから2番目のステップへつながる線も青色になります。
強調色を変更したい場合は、style.cssで使用している#2563ebを希望する色へ変更してください。円の枠線・背景・接続線に使用している色を揃えると、統一感のある表示になります。
ステップの円と接続線のサイズを調整する方法
ステップの番号を囲む円は、.html-css-step-bar_circleで設定しています。接続線は、.html-css-step-bar_item:not(:last-child)::afterの疑似要素で表示しています。
/* 線 */
.html-css-step-bar_item:not(:last-child)::after{
content:"";
position:absolute;
top:20px;
left:50%;
width:100%;
height:4px;
background:#d1d5db;
}
/* 丸 */
.html-css-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-weight:700;
box-sizing:border-box;
}
width:44px;とheight:44px;は円の大きさです。両方を同じ数値に変更すると、円形を維持したままサイズを調整できます。
border:4px solid #d1d5db;の4pxは円の枠線の太さです。接続線のheight:4px;を変更すると、線の太さを調整できます。
接続線のtop:20px;は上からの位置を指定しています。円の大きさを変更した場合は、接続線が円の中央を通るように、この数値も合わせて調整してください。
操作ボタンの大きさを変更する方法
「次へ」「戻る」のボタンは、.html-css-step-bar_buttonと.html-css-step-bar_disabledで共通のサイズを設定しています。
/* ボタン */
.html-css-step-bar_button,
.html-css-step-bar_disabled{
display:inline-flex;
align-items:center;
justify-content:center;
width:120px;
height:48px;
border-radius:8px;
font-size:16px;
font-weight:700;
box-sizing:border-box;
}
width:120px;はボタンの横幅、height:48px;は高さです。それぞれの数値を変更すると、ボタンの大きさを調整できます。
border-radius:8px;は角丸の大きさ、font-size:16px;はボタン内の文字サイズです。
操作できるボタンと操作できないボタンには共通のサイズ設定が適用されるため、変更後も同じ大きさで表示されます。
レスポンシブ対応
style.cssでは、ステップバー全体にwidth:100%;とmax-width:900px;を設定しています。これにより、広い画面では最大900pxまで表示し、狭い画面では設置先の横幅に合わせて縮小します。
画面幅が640px以下になると、メディアクエリによって内側の余白・ステップ名の文字サイズ・操作ボタンの横幅を小さくしています。
/* スマートフォン */
@media (max-width:640px){
.html-css-step-bar_wrap{
padding:24px 18px; /* 内側余白 */
}
.html-css-step-bar_label{
font-size:13px; /* ラベル文字サイズ */
}
.html-css-step-bar_button,
.html-css-step-bar_disabled{
width:100px; /* ボタン幅 */
}
}
通常時の内側余白は32pxですが、画面幅640px以下では上下24px・左右18pxに変更されます。
ステップ名の文字サイズは13px、操作ボタンの横幅は100pxになります。ステップ一覧はスマートフォンでも横並びのまま表示されます。
スマートフォンでの表示を調整したい場合は、メディアクエリ内の数値を変更してください。
コメント