CSS フォームのステップバー デザインテンプレート 3選

フォームに使われているステップを表記するCSSのデザインサンプルです。

特徴

• どこにいるかがひと目で分かる視認性
• ステップ名を変更できる
• レスポンシブ対応
• コピペで簡単作成

ドットタイプ

今どの段階にいるのかをドットで表現したタイプ。

HTML&CSS

See the Pen
css form-step01 by Aquarium (@aquarium)
on CodePen.

ドットタイプ 番号付き

番号付きでさらに全体を把握しやくすなりました。

HTML&CSS

See the Pen
css form-step02 by Aquarium (@aquarium)
on CodePen.

矢印タイプ

ステップの流れを矢印で表したタイプ

See the Pen
form-step03 by Aquarium (@aquarium)
on CodePen.

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選