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

ステップ数字付きファネル図

各段階に丸い数字バッジを添えたファネルです。導入手順や購買プロセスの解説記事で、番号付きの工程として読み進めやすく見せたいときに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-09-wrap">
          <div class="d05-15-09-row"><span class="d05-15-09-badge">1</span><div class="d05-15-09-seg d05-15-09-s1">認知 9,400</div></div>
          <div class="d05-15-09-row"><span class="d05-15-09-badge">2</span><div class="d05-15-09-seg d05-15-09-s2">興味 5,200</div></div>
          <div class="d05-15-09-row"><span class="d05-15-09-badge">3</span><div class="d05-15-09-seg d05-15-09-s3">比較 2,600</div></div>
          <div class="d05-15-09-row"><span class="d05-15-09-badge">4</span><div class="d05-15-09-seg d05-15-09-s4">購入 980</div></div>
        </div>

CSS

.d05-15-09{padding:18px 20px;align-items:stretch}
        .d05-15-09-wrap{display:flex;flex-direction:column;gap:6px;width:100%}
        .d05-15-09-row{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:8px}
        .d05-15-09-badge{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#1e293b;color:#fff;font-size:11px;font-weight:800}
        .d05-15-09-seg{display:flex;align-items:center;justify-content:center;height:32px;color:#fff;font-size:10.5px;font-weight:700;clip-path:polygon(4% 0,96% 0,100% 100%,0% 100%);margin:0 auto}
        .d05-15-09-s1{width:100%;background:#38bdf8}
        .d05-15-09-s2{width:78%;background:#0ea5e9}
        .d05-15-09-s3{width:56%;background:#0284c7}
        .d05-15-09-s4{width:34%;background:#075985}

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