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

円グラフ内訳(静止・凡例付き)

セグメント分けされた静止円グラフと凡例を並べた構成です。売上構成比など内訳データをまとめて見せる場面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-07-pie"></div>
        <ul class="d05-09-07-legend">
          <li><span class="d05-09-07-dot d05-09-07-c1"></span>製品A 45%</li>
          <li><span class="d05-09-07-dot d05-09-07-c2"></span>製品B 30%</li>
          <li><span class="d05-09-07-dot d05-09-07-c3"></span>製品C 15%</li>
          <li><span class="d05-09-07-dot d05-09-07-c4"></span>その他 10%</li>
        </ul>

CSS

.d05-09-07{padding:20px;gap:20px}
        .d05-09-07-pie{flex-shrink:0;width:110px;height:110px;border-radius:50%;background:conic-gradient(#6366f1 0deg 162deg,#22d3ee 162deg 270deg,#34d399 270deg 324deg,#fbbf24 324deg 360deg)}
        .d05-09-07-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
        .d05-09-07-legend li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#475569;font-weight:600}
        .d05-09-07-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
        .d05-09-07-c1{background:#6366f1}
        .d05-09-07-c2{background:#22d3ee}
        .d05-09-07-c3{background:#34d399}
        .d05-09-07-c4{background:#fbbf24}

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