ステップバー内にステップバーを表示する方法
ステップバー内にステップバーを表示する方法を紹介します。このサンプルでは、全体の進行状況を表すステップバーと、現在のステップに含まれる詳しい手順を表すステップバーを組み合わせて表示します。大きな手順の中に複数の小さな手順がある申し込みフォームや登録画面などに利用できます。
外側のステップバーには「基本情報」「お申し込み」「完了」という全体の手順を表示し、現在の「お申し込み」に対応する詳しい手順として「プラン選択」「内容確認」「申し込み」のステップバーを内側へ配置しています。外側のステップバーを薄く表示し、内側のステップバーを強調することで、全体の流れと現在進めている詳しい手順を区別しやすくしています。
このサンプルはHTMLとCSSのみで作成しており、JavaScriptを使用したステップの切り替え処理はありません。ステップ名や項目数、現在位置、色、サイズ、余白などを変更することで、フォームや申し込み画面の構成に合わせてカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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="nested-step-bar_wrap">
<!-- タイトル -->
<div class="nested-step-bar_title">
お申し込み手順
</div>
<!-- 説明文 -->
<p class="nested-step-bar_text">
現在のステップに含まれる詳しい手順を、内側のステップバーで表示しています。
</p>
<!-- 外側のステップバー -->
<div class="nested-step-bar_outer">
<!-- 外側の見出し -->
<div class="nested-step-bar_outer-title">
全体の手順
</div>
<!-- 外側のステップ一覧 -->
<ol class="nested-step-bar_list nested-step-bar_outer-list">
<!-- ステップ1 -->
<li class="nested-step-bar_item">
<div class="nested-step-bar_circle">1</div>
<div class="nested-step-bar_label">基本情報</div>
</li>
<!-- 現在のステップ -->
<li class="nested-step-bar_item is-current">
<div class="nested-step-bar_circle">2</div>
<div class="nested-step-bar_label">お申し込み</div>
</li>
<!-- ステップ3 -->
<li class="nested-step-bar_item">
<div class="nested-step-bar_circle">3</div>
<div class="nested-step-bar_label">完了</div>
</li>
</ol>
<!-- 現在のステップに含まれる内側のステップバー -->
<div class="nested-step-bar_inner">
<!-- 内側の見出し -->
<div class="nested-step-bar_inner-title">
「お申し込み」の詳しい手順
</div>
<!-- 内側のステップ一覧 -->
<ol class="nested-step-bar_list">
<!-- 完了したステップ -->
<li class="nested-step-bar_item is-complete">
<div class="nested-step-bar_circle">1</div>
<div class="nested-step-bar_label">プラン選択</div>
</li>
<!-- 現在のステップ -->
<li class="nested-step-bar_item is-current">
<div class="nested-step-bar_circle">2</div>
<div class="nested-step-bar_label">内容確認</div>
</li>
<!-- 未完了のステップ -->
<li class="nested-step-bar_item">
<div class="nested-step-bar_circle">3</div>
<div class="nested-step-bar_label">申し込み</div>
</li>
</ol>
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは、全体の進行状況を表す外側のステップバーと、現在のステップに含まれる詳しい手順を表す内側のステップバーを配置します。CSSでは、それぞれのステップ番号や接続線、現在位置、完了状態などの見た目を設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはステップバー全体を構成するファイルです。「基本情報」「お申し込み」「完了」の外側ステップと、「プラン選択」「内容確認」「申し込み」の内側ステップを記述しています。タイトル、説明文、ステップ名、ステップ番号、現在位置、完了状態を変更できます。
style.cssは外側と内側のステップバーのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、ステップ番号の大きさ、接続線、文字サイズ、現在位置の強調、外側ステップバーの透明度、内側ステップバーの枠線や影などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。外側のステップバーには全体の手順が表示され、その下に現在の「お申し込み」に含まれる詳しい手順が内側のステップバーとして表示されます。
このサンプルではJavaScriptを使用していないため、クリックによるステップの切り替えは行いません。現在位置はindex.htmlのis-current、完了状態は内側ステップのis-completeによって表示しています。
カスタマイズできる内容
index.htmlでは「お申し込み手順」のタイトル、説明文、「全体の手順」や「『お申し込み』の詳しい手順」の見出し、各ステップの番号とステップ名を変更できます。外側のis-currentを別のステップへ付け替えると現在位置を変更できます。内側ではis-completeで完了したステップ、is-currentで現在のステップを指定できます。
style.cssではステップバー全体の最大横幅、余白、背景色、枠線、角丸を変更できます。外側ステップバーの透明度や、内側ステップバーの横幅、枠線、角丸、影も調整できます。また、ステップ番号の大きさ、接続線の太さ、ステップ名の文字サイズ、現在位置や完了状態に使用する色も変更できます。
数値調整
style.css
max-width:900px;
ステップバー全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
ステップバー全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
ステップバー全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
ステップバー全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
padding:24px;
外側ステップバーの内側余白です。値を大きくすると内容と枠線の間隔が広がります。
width:44px; / height:44px;
外側のステップ番号を囲む円の大きさです。値を大きくすると円が大きくなり、小さくすると小さくなります。
height:4px;
外側のステップ同士をつなぐ線の太さです。値を大きくすると線が太くなります。
opacity:.45;
外側ステップバーの透明度です。値を小さくすると薄くなり、1へ近づけるほど濃く表示されます。
width:82%;
内側ステップバーの横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
margin:30px auto 0;
内側ステップバーと外側ステップバーの間隔です。30pxを大きくすると上下の間隔が広がります。
padding:26px 24px;
内側ステップバーの内側余白です。上下26px・左右24pxを変更すると、内容と枠線の間隔を調整できます。
border:2px solid #60a5fa;
内側ステップバーの枠線です。2pxを大きくすると枠線が太くなります。
box-shadow:0 12px 30px rgba(37,99,235,.12);
内側ステップバーの影です。12pxで縦方向の位置、30pxでぼかしの広がりを調整できます。
width:38px; / height:38px;
内側のステップ番号を囲む円の大きさです。値を大きくすると円が大きくなり、小さくすると小さくなります。
height:3px;
内側のステップ同士をつなぐ線の太さです。値を大きくすると線が太くなります。
font-size:14px;
内側のステップ名の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでステップバー全体にwidth:100%とmax-width:900pxを指定し、利用できる画面幅に合わせて縮小できるようにしています。
画面幅640px以下ではメディアクエリを使用し、全体の余白をpadding:24px 18px;、外側ステップバーの余白をpadding:20px 14px;へ変更します。内側ステップバーはwidth:100%として横幅を確保し、ステップ名の文字サイズや内側余白も小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント