【開発】フラットデザインちっくなフォームのステップバーをCSSだけでつくる
よくあるフォームの上にある、進捗を示すステップバーをCSSだけで作りたくて、いろいろ探した。けど、いい頃合いのものがない。
[CSS]ステップで進行状況を表現するスタイルシート | コリス
文言をしっかり書けるエリアと長さが欲しいのでダメだった。
css でステップメニューを作る | まとめーたー
理想なの見つけた!と思ったんだけど、HTML側STEP3→2→1って構造が逆になるのが何となくいやなので、ちょっと考える。
いろんなパンくずリストを画像を使わずに CSS で再現してみた。 - buena suerte!
こっちはいい感じ。いろんなパンくずリストをCSSだけで再現って面白い企画。
だけど、いかんせんパンくずのためのデザインなので、最後の完了のcurrent表示で色の塗りつぶしとかうまくいかない。
なので結局、最後の記事をベースに自分で新しくつくった。
今回作ったステップバー
できたのはこれ
ソースはこちら
ご利用中のシステムにあわせて、2.SCSS か3.CSS のどちらかを使ってくれればと思います。 SCSS組み込み想定で作ってるので、デザイナーさんはコンパイル済みのCSSの方をご参照いただければと思います。 currentの色、すごい微妙に作ってるので、適当に変えてください。
他、ステップバーの参考デザイン一覧
あと、他のデザインのステップバーを作ってみたいかたは、以下のサイトが参考になるかと思います。 海外のいろんなECサイトの購入時のステップバーデザインが画像で一覧化されていて便利です。