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

完了/進行中/未着手バッジ付きステップリスト

各ステップの状態をバッジ色で示すリスト表示です。会員マイページの登録手続き状況や設定ウィザードの案内表示として使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d04-10-06-list">
          <li class="d04-10-06-row"><span class="d04-10-06-badge d04-10-06-badge-done">完了</span><span class="d04-10-06-text">アカウント作成</span></li>
          <li class="d04-10-06-row"><span class="d04-10-06-badge d04-10-06-badge-active">進行中</span><span class="d04-10-06-text">プロフィール設定</span></li>
          <li class="d04-10-06-row"><span class="d04-10-06-badge d04-10-06-badge-todo">未着手</span><span class="d04-10-06-text">本人確認</span></li>
        </ul>

CSS

.d04-10-06-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px;font-family:sans-serif}
        .d04-10-06-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:#f8f8fc;border:1px solid #eef0f3}
        .d04-10-06-badge{flex:none;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px}
        .d04-10-06-badge-done{background:#dcfce7;color:#15803d}
        .d04-10-06-badge-active{background:#e0e7ff;color:#4338ca}
        .d04-10-06-badge-todo{background:#f1f5f9;color:#94a3b8}
        .d04-10-06-text{font-size:12.5px;color:#374151;font-weight:600}

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