フォームのステップ CSSデザインサンプル 3選

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

特徴

  • レスポンシブ対応
  • ステップ名変更可
  • 色変更可

ドットタイプ

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

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

HTML&CSS

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

ドットタイプ 番号付き

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

See the Pen
css form-step02
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.

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

おすすめ書籍

  • このエントリーをはてなブックマークに追加

デザイナーのUIメモ帳

レイアウト

Google Map

ヒーローエリア

画像

CSSデザインサンプル