パーツ番号 05-15-08 ・ CSSのみ

パーセンテージバー付き縦積みファネル

台形の小さなマーカーと横棒バーを組み合わせたリスト型ファネルです。管理画面ダッシュボードで各ステップの通過率を一覧表示するUI見本として使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d05-15-08-list">
          <li><span class="d05-15-08-tri d05-15-08-t1"></span><span class="d05-15-08-name">閲覧</span><span class="d05-15-08-track"><span class="d05-15-08-bar d05-15-08-w1"></span></span><span class="d05-15-08-val">100%</span></li>
          <li><span class="d05-15-08-tri d05-15-08-t2"></span><span class="d05-15-08-name">カート</span><span class="d05-15-08-track"><span class="d05-15-08-bar d05-15-08-w2"></span></span><span class="d05-15-08-val">58%</span></li>
          <li><span class="d05-15-08-tri d05-15-08-t3"></span><span class="d05-15-08-name">入力</span><span class="d05-15-08-track"><span class="d05-15-08-bar d05-15-08-w3"></span></span><span class="d05-15-08-val">31%</span></li>
          <li><span class="d05-15-08-tri d05-15-08-t4"></span><span class="d05-15-08-name">購入</span><span class="d05-15-08-track"><span class="d05-15-08-bar d05-15-08-w4"></span></span><span class="d05-15-08-val">17%</span></li>
        </ul>

CSS

.d05-15-08{padding:20px;align-items:stretch}
        .d05-15-08-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:11px}
        .d05-15-08-list li{display:grid;grid-template-columns:16px 40px 1fr 34px;align-items:center;gap:8px}
        .d05-15-08-tri{display:block;width:14px;height:14px;clip-path:polygon(0 0,100% 0,50% 100%)}
        .d05-15-08-t1{background:#fbbf24}
        .d05-15-08-t2{background:#f59e0b}
        .d05-15-08-t3{background:#d97706}
        .d05-15-08-t4{background:#b45309}
        .d05-15-08-name{font-size:11px;color:#475569;font-weight:600}
        .d05-15-08-track{height:9px;border-radius:5px;background:#f1f5f9;overflow:hidden}
        .d05-15-08-bar{display:block;height:100%;border-radius:5px;background:#f59e0b}
        .d05-15-08-w1{width:100%}
        .d05-15-08-w2{width:58%}
        .d05-15-08-w3{width:31%}
        .d05-15-08-w4{width:17%}
        .d05-15-08-val{font-size:11px;font-weight:700;color:#1e293b;text-align:right}

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