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

チェックリスト形式セットアップ案内(静止)

初期設定として済ませておきたいタスクを一覧にしたチェックリスト。管理画面の初期案内パネルに使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d11-07-03-list">
          <li class="d11-07-03-li is-done"><span class="d11-07-03-box">✓</span>アカウント作成</li>
          <li class="d11-07-03-li is-done"><span class="d11-07-03-box">✓</span>メール認証</li>
          <li class="d11-07-03-li"><span class="d11-07-03-box"></span>プロフィール写真の設定</li>
          <li class="d11-07-03-li"><span class="d11-07-03-box"></span>支払い方法の登録</li>
        </ul>

CSS

.d11-07-03-list{ list-style:none; margin:0; padding:0; width:100%; max-width:210px; }
        .d11-07-03-li{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12.5px; color:#94a3b8; border-bottom:1px dashed #e2e8f0; }
        .d11-07-03-li:last-child{ border-bottom:none; }
        .d11-07-03-box{ width:18px; height:18px; flex:none; border-radius:5px; border:1.5px solid #cbd5e1; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
        .d11-07-03-li.is-done{ color:#0f172a; }
        .d11-07-03-li.is-done .d11-07-03-box{ background:#22c55e; border-color:#22c55e; }

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