コニファ・ロゴ

ツール集:[CSS] 購入などの進捗状態を知らせるステップ表示(2)

ユーザーが現在の進捗状態(プログレス)がどの辺りか確認しやすくするためのステップ表示その2です。その1は「[CSS] 購入などの進捗状態を知らせるステップ表示」です。その1と同様にCSSのみで作っていますが、違いはradioボタンを使っている点で、1が遷移画面ごとにひとつのステップ表示を使うのに対して、こちらはiframeなどを利用した遷移で、ひとつのステップ表示を使い、遷移位置によりcssを書き換えるタイプです。

上側のradioボタンやlabelのテキストをクリックして遷移位置を変更すると、大きな赤色テキスト部分がムーブダウン、ムーブアップして切り替わります。また、切り替わった対置のradioボタンの周りが明滅して現在位置を示します。

ステップ表示サンプル

STEP 1 商品選択
STEP 2 送り先選択
STEP 3 支払い選択
STEP 4 終了

サンプルのhtmlソース

<div class="timeline">
  <div class="w-table">
    <div class="w-table-cell">
      <div class="timeline_card">
        <input checked="" class="timeline_input" id="btn1" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn1">商品選択</label>
        <div class="timeline_info">
          <span>STEP 1</span> 商品選択
        </div>
        <input class="timeline_input" id="btn2" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn2">送り先選択</label>
        <div class="timeline_info">
          <span>STEP 2</span> 送り先選択
        </div>
        <input class="timeline_input" id="btn3" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn3">支払い選択</label>
        <div class="timeline_info">
          <span>STEP 3</span> 支払い選択
        </div>
        <input class="timeline_input" id="btn4" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn4">終了</label>
        <div class="timeline_info">
          <span>STEP 4</span> 終了
        </div>
        <div class="timeline_line"></div>
      </div>
    </div>
  </div>
</div>

 

 

 

 

戻るボタン