パーツ番号 04-10-11 ・ CSSのみ
縦型タイムラインステップ(静止)
完了・進行中・未対応の状態を縦につないだタイムライン風の静止ステップ表示です。会員登録の審査状況や注文処理の進捗案内ページに使えます。
プレビュー
ソースコード
HTML
<ul class="d04-10-11-timeline">
<li class="d04-10-11-tl-item d04-10-11-done">
<span class="d04-10-11-tl-dot"></span>
<div class="d04-10-11-tl-body"><p class="d04-10-11-tl-title">お申し込み受付</p><p class="d04-10-11-tl-time">10:02 完了</p></div>
</li>
<li class="d04-10-11-tl-item d04-10-11-done">
<span class="d04-10-11-tl-dot"></span>
<div class="d04-10-11-tl-body"><p class="d04-10-11-tl-title">内容確認</p><p class="d04-10-11-tl-time">10:15 完了</p></div>
</li>
<li class="d04-10-11-tl-item d04-10-11-active">
<span class="d04-10-11-tl-dot"></span>
<div class="d04-10-11-tl-body"><p class="d04-10-11-tl-title">審査中</p><p class="d04-10-11-tl-time">対応中</p></div>
</li>
<li class="d04-10-11-tl-item">
<span class="d04-10-11-tl-dot"></span>
<div class="d04-10-11-tl-body"><p class="d04-10-11-tl-title">完了通知</p><p class="d04-10-11-tl-time">未対応</p></div>
</li>
</ul>CSS
.d04-10-11-timeline{list-style:none;margin:0;padding:0;width:100%;max-width:260px;font-family:sans-serif}
.d04-10-11-tl-item{position:relative;display:flex;gap:12px;padding-bottom:18px;padding-left:4px}
.d04-10-11-tl-item:last-child{padding-bottom:0}
.d04-10-11-tl-item::before{content:'';position:absolute;left:9px;top:20px;bottom:-2px;width:2px;background:#e5e7eb}
.d04-10-11-tl-item:last-child::before{display:none}
.d04-10-11-tl-item.d04-10-11-done::before{background:#6366f1}
.d04-10-11-tl-dot{width:20px;height:20px;border-radius:50%;background:#e5e7eb;flex:0 0 auto;position:relative;z-index:1}
.d04-10-11-done .d04-10-11-tl-dot{background:#6366f1}
.d04-10-11-active .d04-10-11-tl-dot{background:#fff;border:3px solid #6366f1;box-sizing:border-box}
.d04-10-11-tl-title{margin:0;font-size:12.5px;font-weight:700;color:#1f2937}
.d04-10-11-active .d04-10-11-tl-title{color:#4338ca}
.d04-10-11-tl-time{margin:2px 0 0;font-size:10.5px;color:#9ca3af}クラス名 .d04-10-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。