番号付きプロセスステップカード
これは「STEP 01」のような大きな番号を左に置き、見出しと説明文を右に並べた、横並びレイアウトのプロセスステップカードです。 flex で番号エリアと本文エリアを2段組みにし、番号には等幅フォントと大きめのサイズを当てて視覚的な目印にしています。
解説
これは「STEP 01」のような大きな番号を左に置き、見出しと説明文を右に並べた、横並びレイアウトのプロセスステップカードです。flex で番号エリアと本文エリアを2段組みにし、番号には等幅フォントと大きめのサイズを当てて視覚的な目印にしています。CSS のみで構成され、動きはないシンプルな静的カードなので、複数並べて利用の流れを示すのに適しています。
使う場面の例
- サービス利用までの「お問い合わせ→お見積り→契約」の流れ説明
- 申込手順や設定ガイドのステップ表示
- 料金プランの導入ステップやオンボーディングの案内
番号の色は .ps-card__no の color、ラベル（STEP）の字間は letter-spacing で調整できます。同じカードを縦に複数並べ、番号だけ 01・02・03 と差し替えればステップ一覧になります。番号は装飾的な意味合いが強いので、読み上げの順序を保ちたい場合は見出し（h3）に手順名を明確に書いておくと、スクリーンリーダーでも流れが伝わります。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
番号の色や大きさを変えられますか？
はい。CSS の .ps-card__no で color や font-size を指定しているので、その値を変えるだけでブランドカラーや好みのサイズに調整できます。
ステップを増やすにはどうしますか？
このカードの article 要素を複製し、番号と見出し・説明文を書き換えるだけです。01・02・03 と番号を変えて縦に並べれば、手順の一覧になります。