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

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

特徴

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

ドットタイプ

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

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

HTML&CSS

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

ドットタイプ 番号付き

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

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

HTML&CSS

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

矢印タイプ

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

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

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

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

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

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。