パーツ番号 11-08-09 ・ CSSのみ

ドーナツ内訳+凡例ウィジェット(固定値)

SVGドーナツグラフと色分け凡例を固定値で組み合わせたセットです。流入経路の内訳や会員ランク構成の可視化見本に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-08-09-card">
          <svg class="d11-08-09-donut" viewBox="0 0 42 42">
            <circle class="d11-08-09-bg" cx="21" cy="21" r="15.9" fill="none" stroke="#eef2f7" stroke-width="7"/>
            <circle class="d11-08-09-seg" cx="21" cy="21" r="15.9" fill="none" stroke="#3b82f6" stroke-width="7" stroke-dasharray="45 55" stroke-dashoffset="25"/>
            <circle class="d11-08-09-seg" cx="21" cy="21" r="15.9" fill="none" stroke="#8b5cf6" stroke-width="7" stroke-dasharray="30 70" stroke-dashoffset="80"/>
            <circle class="d11-08-09-seg" cx="21" cy="21" r="15.9" fill="none" stroke="#f59e0b" stroke-width="7" stroke-dasharray="25 75" stroke-dashoffset="50"/>
          </svg>
          <ul class="d11-08-09-legend">
            <li><span style="background:#3b82f6"></span>オーガニック<b>45%</b></li>
            <li><span style="background:#8b5cf6"></span>SNS<b>30%</b></li>
            <li><span style="background:#f59e0b"></span>広告<b>25%</b></li>
          </ul>
        </div>

CSS

.d11-08-09{background:#f1f5f9}
        .d11-08-09-card{width:270px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;display:flex;align-items:center;gap:18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d11-08-09-donut{width:96px;height:96px;flex:0 0 96px;transform:rotate(-90deg)}
        .d11-08-09-legend{list-style:none;margin:0;padding:0;flex:1}
        .d11-08-09-legend li{display:flex;align-items:center;font-size:12px;color:#334155;padding:4px 0}
        .d11-08-09-legend li span{width:10px;height:10px;border-radius:3px;margin-right:8px;flex:0 0 10px}
        .d11-08-09-legend li b{margin-left:auto;font-weight:700;color:#0f172a}

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