パーツ番号 09-10-12 ・ CSSのみ

積み上げ内訳付きプログレスバー

1本のバーを複数区分に色分けして内訳を示す静止表示です。カテゴリ別の構成比や達成内訳の表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="stkwrap">
          <div class="strow"><span class="stlb">在庫消化率</span><span class="stnum">42%</span></div>
          <div class="sttrack">
            <div class="stseg" style="width:20%;background:#4f7cff"></div>
            <div class="stseg" style="width:14%;background:#22c55e"></div>
            <div class="stseg" style="width:8%;background:#f59e0b"></div>
          </div>
          <div class="stlegend">
            <span><i style="background:#4f7cff"></i>Aランク</span>
            <span><i style="background:#22c55e"></i>Bランク</span>
            <span><i style="background:#f59e0b"></i>Cランク</span>
          </div>
        </div>

CSS

.d09-10-12 .stkwrap{width:100%;max-width:280px}
        .d09-10-12 .strow{display:flex;justify-content:space-between;font-size:12.5px;color:#334155;margin-bottom:8px}
        .d09-10-12 .stnum{font-weight:700;color:#1e293b}
        .d09-10-12 .sttrack{display:flex;width:100%;height:12px;background:#eef2f7;border-radius:6px;overflow:hidden}
        .d09-10-12 .stseg{height:100%}
        .d09-10-12 .stlegend{display:flex;gap:12px;margin-top:8px}
        .d09-10-12 .stlegend span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#64748b}
        .d09-10-12 .stlegend i{width:8px;height:8px;border-radius:2px;display:inline-block}

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