パーツ番号 04-10-12 ・ CSSのみ

残りステップ数を大きく見せるカウントカード

残りステップ数を大きな数字で強調した静止カードです。無料相談フォームや資料請求フォームで、あと少しで完了することを直感的に伝えたいときに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-10-12-card">
          <p class="d04-10-12-label">完了まで</p>
          <p class="d04-10-12-num"><span class="d04-10-12-big">2</span>ステップ</p>
          <div class="d04-10-12-mini">
            <span class="d04-10-12-mdot d04-10-12-mdot-done"></span>
            <span class="d04-10-12-mdot d04-10-12-mdot-done"></span>
            <span class="d04-10-12-mdot"></span>
            <span class="d04-10-12-mdot"></span>
          </div>
        </div>

CSS

.d04-10-12-card{width:100%;max-width:220px;text-align:center;background:#f8f8fc;border:1px solid #eef0f3;border-radius:14px;padding:22px 18px;font-family:sans-serif}
        .d04-10-12-label{margin:0 0 6px;font-size:11px;color:#9ca3af;font-weight:700;letter-spacing:.05em}
        .d04-10-12-num{margin:0 0 14px;font-size:14px;color:#374151;font-weight:700}
        .d04-10-12-big{display:block;font-size:44px;font-weight:800;color:#6366f1;line-height:1.1}
        .d04-10-12-mini{display:flex;justify-content:center;gap:6px}
        .d04-10-12-mdot{width:9px;height:9px;border-radius:50%;background:#e5e7eb}
        .d04-10-12-mdot-done{background:#6366f1}

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