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

複数チャネル比較の並列ファネル

3つの流入チャネルのファネルを横に並べて比較する見本です。チャネル別の成約率を並べて見せたいマーケティングレポートのサンプル図として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-15-07-wrap">
          <div class="d05-15-07-col">
            <div class="d05-15-07-seg d05-15-07-a1"></div>
            <div class="d05-15-07-seg d05-15-07-a2"></div>
            <div class="d05-15-07-seg d05-15-07-a3"></div>
            <span class="d05-15-07-name">Web広告</span>
          </div>
          <div class="d05-15-07-col">
            <div class="d05-15-07-seg d05-15-07-b1"></div>
            <div class="d05-15-07-seg d05-15-07-b2"></div>
            <div class="d05-15-07-seg d05-15-07-b3"></div>
            <span class="d05-15-07-name">SNS</span>
          </div>
          <div class="d05-15-07-col">
            <div class="d05-15-07-seg d05-15-07-c1"></div>
            <div class="d05-15-07-seg d05-15-07-c2"></div>
            <div class="d05-15-07-seg d05-15-07-c3"></div>
            <span class="d05-15-07-name">店頭</span>
          </div>
        </div>

CSS

.d05-15-07{padding:18px 20px;align-items:stretch}
        .d05-15-07-wrap{display:flex;justify-content:center;gap:22px;width:100%}
        .d05-15-07-col{display:flex;flex-direction:column;align-items:center;gap:3px}
        .d05-15-07-seg{height:24px;clip-path:polygon(6% 0,94% 0,100% 100%,0% 100%)}
        .d05-15-07-a1{width:64px;background:#60a5fa}
        .d05-15-07-a2{width:44px;background:#3b82f6}
        .d05-15-07-a3{width:24px;background:#1d4ed8}
        .d05-15-07-b1{width:64px;background:#c4b5fd}
        .d05-15-07-b2{width:40px;background:#8b5cf6}
        .d05-15-07-b3{width:20px;background:#5b21b6}
        .d05-15-07-c1{width:64px;background:#6ee7b7}
        .d05-15-07-c2{width:48px;background:#10b981}
        .d05-15-07-c3{width:30px;background:#047857}
        .d05-15-07-name{margin-top:6px;font-size:10px;color:#64748b;font-weight:700}

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