パーツ番号 11-07-02 ・ CSSのみ

3ステップ案内カード(静止・進む先なし)

会員登録の流れを3枚のカードで並べて説明する案内。手続きの全体像を先に示したい導線に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-02-row">
          <div class="d11-07-02-card">
            <span class="d11-07-02-num">1</span>
            <p class="d11-07-02-t">プロフィール登録</p>
            <p class="d11-07-02-d">基本情報を入力</p>
          </div>
          <div class="d11-07-02-card">
            <span class="d11-07-02-num">2</span>
            <p class="d11-07-02-t">プラン選択</p>
            <p class="d11-07-02-d">利用プランを決定</p>
          </div>
          <div class="d11-07-02-card">
            <span class="d11-07-02-num">3</span>
            <p class="d11-07-02-t">利用開始</p>
            <p class="d11-07-02-d">ダッシュボードへ</p>
          </div>
        </div>

CSS

.d11-07-02-row{ display:flex; gap:8px; }
        .d11-07-02-card{ width:80px; padding:12px 8px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; text-align:center; }
        .d11-07-02-num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#0ea5e9; color:#fff; font-size:11px; font-weight:700; }
        .d11-07-02-t{ margin:8px 0 2px; font-size:11.5px; font-weight:700; color:#0f172a; }
        .d11-07-02-d{ margin:0; font-size:10px; color:#64748b; }

クラス名 .d11-07-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。