番号付きステップカード（プロセス紹介）
大きな連番・見出し・説明文で 1 ステップを表す、業務プロセス紹介用のカードです。番号は position:absolute でカード右上に配置し、等幅フォントと大きな font-size 、薄めの opacity で「装飾的な番号」として控えめに効かせています。
解説
大きな連番・見出し・説明文で 1 ステップを表す、業務プロセス紹介用のカードです。番号は position:absolute でカード右上に配置し、等幅フォントと大きな font-size、薄めの opacity で「装飾的な番号」として控えめに効かせています。見出しには右側の番号と重ならないよう padding-right が入り、説明文は line-height:1.85 でゆったり読ませる設計です。CSS のみで動く静的なカードです。
こんな場面で使えます
- 「ご利用までの 4 ステップ」など申込フローの説明
- サービス紹介セクションの手順案内
- 導入の流れや制作プロセスの図解
カスタマイズは番号を 01・02・03 と振り、複数枚を Grid や Flex で横並びにすればプロセス全体が一目で伝わります。番号の色やサイズを変えるとアクセントの強さを調整でき、opacity を下げるほど背景に溶け込んで上品になります。番号は見た目の装飾なので、順序を意味として正しく伝えたい場合は本文側にも「ステップ 1」と書くと、読み上げ環境でも順番が分かりやすくなります。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
複数のステップを横に並べるにはどうしますか。
このカードを必要なステップ数だけ用意し、親要素を Grid か Flex にして並べるだけです。番号を 01、02、03 と変えていけば、申込や導入の流れが一連のプロセスとして自然に伝わります。
大きな番号が見出しと重なりませんか。
重なりません。番号はカード右上に絶対配置され、見出し側に padding-right が入っているため文字がぶつからないようになっています。番号を大きくしたいときは、その余白も合わせて広げると安全です。