HTML/CSSだけでステップバーを作る方法
HTML/CSSだけでステップバーを作る方法を紹介します。このサンプルでは、HTMLとCSSのみを使用して現在の進行状況を分かりやすく表示できるステップバーを作成します。入力・確認・完了など複数の手順を横並びで表示し、現在の位置や完了済みのステップを視覚的に区別できるため、利用者が全体の流れを把握しやすくなります。JavaScriptを使用しないため、シンプルな構成で導入できることも特徴です。
会員登録、お問い合わせフォーム、ECサイトの購入手続き、予約フォームなど、複数の入力工程があるページで活用できます。現在の工程だけでなく、これまで完了したステップや残りの手順も一覧で表示できるため、利用者が迷いにくく、操作の安心感を高められます。固定された進行状況を表示したいランディングページや説明ページにも適しています。
タイトル、説明文、各ステップ名はHTMLから変更できます。CSSではバー全体の横幅、丸いステップのサイズ、線の太さ、背景色、文字色、角丸などを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも利用しやすく、HTML/CSSだけで実装できるシンプルなステップバーのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「次へ」「戻る」をクリックすると、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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではステップ番号、各ステップ名、「次へ」「戻る」の操作部分を配置し、ラジオボタンの選択状態によって現在のステップを管理します。CSSでは選択中・完了済み・未完了のステップを色分けし、JavaScriptを使わずに進行状況を切り替えられるようにしています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはステップバー全体を構成するファイルです。タイトル、説明文、ステップ番号、ステップ名、「次へ」「戻る」の表示を変更できます。3つのラジオボタンで現在のステップを管理し、各label要素をクリックすると対応するステップへ切り替わります。
style.cssはステップバー全体のデザインと切り替え表示を設定するファイルです。現在のステップは青い枠線、完了したステップは青い背景、未完了のステップはグレーで表示します。また、選択中のラジオボタンに応じて使用できる操作ボタンだけを表示します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置してください。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開きます。「次へ」をクリックすると次のステップへ進み、「戻る」をクリックすると前のステップへ戻ります。最初のステップでは「戻る」、最後のステップでは「次へ」が無効状態で表示されます。
カスタマイズできる内容
index.htmlでは「お申し込み手順」のタイトル、説明文、「入力」「確認」「完了」のステップ名を変更できます。ラジオボタン、ステップ項目、操作部分を同じ構成で追加すると、ステップ数を増やすこともできます。
style.cssではステップバー全体の横幅、余白、背景色、枠線、角丸、ステップ番号のサイズ、連結線の太さ、現在・完了・未完了の色、操作ボタンの横幅や高さを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がります。
max-width:900px;
ステップバー全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
ステップバー全体の上下余白と左右中央配置を設定しています。40pxを大きくすると上下の間隔が広がります。
padding:32px;
ステップバー全体の内側余白です。値を大きくすると内容と枠線の間隔が広がります。
border:1px solid #e5e7eb;
ステップバー全体の枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
ステップバー全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとステップ一覧との間隔が広がります。
top:20px;
ステップ同士をつなぐ線の上下位置です。ステップ番号の円に合わせて変更します。
height:4px;
ステップ同士をつなぐ線の太さです。値を大きくすると線が太くなります。
width:44px;
ステップ番号の円の横幅です。値を大きくすると円が大きくなります。
height:44px;
ステップ番号の円の高さです。横幅と同じ値にすると円形を維持できます。
border:4px solid #d1d5db;
ステップ番号の円を囲む枠線です。4pxを大きくすると枠線が太くなります。
margin-top:12px;
ステップ番号とステップ名の間隔です。値を大きくすると上下の間隔が広がります。
margin-top:36px;
ステップ一覧と操作ボタンの間隔です。値を大きくするとボタンが下へ離れます。
gap:16px;
「戻る」と「次へ」の間隔です。値を大きくすると2つのボタンが離れます。
width:120px;
操作ボタンの横幅です。値を大きくするとボタンが横へ広がります。
height:48px;
操作ボタンの高さです。値を大きくするとボタンが縦へ大きくなります。
border-radius:8px;
操作ボタンの角丸です。値を大きくすると丸みが強くなります。
font-size:16px;
操作ボタンの文字サイズです。値を大きくすると文字が大きくなります。
@media (max-width:640px)
スマートフォン向けの表示へ切り替える画面幅です。値を変更すると切り替わるタイミングが変わります。
padding:24px 18px;
画面幅640px以下で使用するステップバー全体の内側余白です。狭い画面でも内容が収まりやすくなります。
width:100px;
スマートフォン表示時の操作ボタンの横幅です。値を小さくすると狭い画面へ収まりやすくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxによって、ステップバー全体が画面幅に合わせて縮小されます。また、640px以下では全体の内側余白、ステップ名の文字サイズ、操作ボタンの横幅を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント