formなどで簡単に使用できるCSSだけで作れるステッププログレスバー

購入フォームなどで何個かステップがある場合、それを分けて表示する際にユーザーが現在どの作業中か知らせるプログレスバー。勝手にステッププログレスバーと名付けましたが、なんかしっくりきたので以下ステッププログレスバーと呼ぶことにします。

今回はそのステッププログレスバーをcssで実装してみましたので、もし今フォームの実装をしていて、かつステッププログレスバーを必要としている人はコピペしてどんどん使用してください。

DEMO

パターン1

  • Basket
  • Delivery
  • Confirm
  • Done

パターン2

  • Basket
  • Delivery
  • Confirm
  • Done

コード

html

css

基本的なCSSしか使用していませんが、説明すべき点をあげるならばcontent:counter(step)でしょうか。こちらでstep数を自動で表示するようにしています。
counter-increment: step;で要素が増えるたびにstepを+1してくれるので個数が増えても自動でなるような仕組みですね。こちらはstep数だけでなく自動で個数の連番をふりたいときとかにも使用できます。

あと、.progressbar li.active + li:afteractiveクラスが付与されている隣のli要素のafterという指定です。上記DEMOで説明すると、step2がactiveの場合、step3のli要素のafter(円の左横の棒)が指定され、background-color: #55b776;で色を変更しています。

まとめ
CSSの基本的な知識+@でステッププログレスバーが実装できるので、一度試してみてはいかがでしょうか? +で隣り合う要素を指定する、counterで連番を自動で付与するなど他の箇所でも使える知識だと思いますのでどんどん利用してCSSのコードを少なくしましょう。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。