ECサイトで購入の手続きを進めるようなケースで、ユーザーは現在の進捗状態（プログレス）がどの辺りで、あとどのくらいかかるのか気になります。それを知らせるのがステップ表示です。普通は進捗状態をステップごとの画像で表しますが、これをCSSだけ（矢印などの画像は使用します）で作成したのが今回のサンプルです。画像の場合と違って、ステップの名称を変更するなどの汎用性を持たせることができます。

4ステップの基本表示サンプル

4ステップの基本表示サンプル htmlソース

<ul>
	<li><span><a href="" title="Step 1">1</a></span><a href="#" title="">Step 1</a></li>
	<li><span><a href="" title="Step 2">2</a></span><a href="#" title="">Step 2</a></li>
	<li><span><a href="" title="Step 3">3</a></span><a href="#" title="">Step 3</a></li>
	<li><span><a href="" title="Step 4">4</a></span><a href="#" title="">Step 4</a></li>
</ul>

「Step 4」は最後で次がないので、そのli要素に「id="lastStep"」を付けてデザインを変更。現在位置のステップのli要素には「class="active"」、終了したステップのli要素には「class="past"」をそれぞれ付けてデザインを変更します。また、「Step 1」、「Step 2」などのステップ名称を使用するものに変更します。さらに、このサンプルでは終了したステップ部分をクリックして戻るなどのアクションを追加できるように数字部分へのhoverによる見た目の変更も付いています。

そうして作成したものが次の4つのステップ表示です。

第1ステップ

第2ステップ

第3ステップ

第4ステップ