モーダル・通知・タブコード生成用
進み具合を示すステッパー
「カート → お届け先 → お支払い」の現在地を示す。
用途・説明
購入や申し込みの手続きで、いまどのステップにいるかを示すステッパーを作成します。済んだステップにはチェックマーク、現在のステップは強調、これからのステップは薄く表示します。済んだステップには、押して戻れます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップのリスト]- 例：カート、お届け先、お支払い、完了
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「進み具合を示すステッパー」を実装してください。 ## 表示内容 - ステップ：[ステップのリスト] - サンプルとして、2つ目のステップが現在の状態を表示する ## レイアウト - ステップを横に均等に並べ、丸どうしを1本の線でつなぐ - 各ステップは、上に番号の丸、下にステップの名前（中央揃え） - スマホで名前が収まらないときは、現在のステップの名前だけを表示し、「2 / 4」を添える ## デザイン - 丸：32px、文字 14px・font-weight 700 - 済んだステップ：丸の背景 #1463F0、なかに白いチェックマーク。名前の色 #5F6D84 - 現在のステップ：丸の背景 #FFFFFF、#1463F0 の線（2px）、数字 #1463F0。名前は font-weight 700・色 #1B2A44 - これからのステップ：丸の背景 #FFFFFF、#DCE4F0 の線（2px）、数字 #8A96AA。名前の色 #8A96AA - 線：太さ 2px。済んだ区間は #1463F0、これからの区間は #DCE4F0 - 名前：13px、丸の下 8px ## 動作 - 現在のステップの番号を渡すと、表示が変わる - 済んだステップは、押すとそのステップに戻れる（リンクまたはボタン）。これからのステップは押せない - ステップが進んだとき、線が左から伸びる（0.3秒） ## アクセシビリティ - nav 要素（aria-label="手続きの進み具合"）のなかの ol / li でマークアップする - 現在のステップに aria-current="step" を付ける - 済んだステップには、読み上げ用に「完了」の文字を添える - 色だけでなく、チェックマーク・数字・太字で、状態の違いが分かるようにする - 線の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - ステップを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。