パーツ番号 05-12-12 ・ CSSのみ

バレットチャート(目標ライン付き横棒)

低〜高の定性的な範囲を背景の濃淡で示し、実績バーと目標値の縦線を重ねたバレットチャートの静止見本です。KPIレポートで目標達成度を一目で伝えたい場面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-12-wrap">
          <p class="d05-12-12-label">四半期売上目標</p>
          <div class="d05-12-12-bullet">
            <span class="d05-12-12-range r1"></span>
            <span class="d05-12-12-range r2"></span>
            <span class="d05-12-12-range r3"></span>
            <span class="d05-12-12-bar"></span>
            <span class="d05-12-12-target"></span>
          </div>
          <div class="d05-12-12-scale"><span>0</span><span>50</span><span>100</span><span>150(百万円)</span></div>
        </div>

CSS

.d05-12-12{padding:20px;align-items:stretch}
        .d05-12-12-wrap{width:100%;display:flex;flex-direction:column;gap:8px}
        .d05-12-12-label{margin:0;font-size:12px;color:#64748b;font-weight:600}
        .d05-12-12-bullet{position:relative;height:26px;border-radius:4px;overflow:hidden;display:flex}
        .d05-12-12-range{display:block;height:100%}
        .d05-12-12-range.r1{width:35%;background:#e2e8f0}
        .d05-12-12-range.r2{width:35%;background:#cbd5e1}
        .d05-12-12-range.r3{width:30%;background:#94a3b8}
        .d05-12-12-bar{position:absolute;left:0;top:8px;bottom:8px;width:62%;background:#1e293b;border-radius:2px}
        .d05-12-12-target{position:absolute;left:78%;top:0;bottom:0;width:3px;background:#ef4444}
        .d05-12-12-scale{display:flex;justify-content:space-between;font-size:9.5px;color:#94a3b8}

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