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

二値比較バー(Before/After静止)

施策の前後の数値を2本の横棒で静止比較する表示です。改善効果や導入前後の成果をまとめて伝える資料に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-08-wrap">
          <div class="d05-09-08-row">
            <span class="d05-09-08-tag">Before</span>
            <span class="d05-09-08-track"><span class="d05-09-08-bar d05-09-08-before"></span></span>
            <span class="d05-09-08-num">42%</span>
          </div>
          <div class="d05-09-08-row">
            <span class="d05-09-08-tag">After</span>
            <span class="d05-09-08-track"><span class="d05-09-08-bar d05-09-08-after"></span></span>
            <span class="d05-09-08-num">87%</span>
          </div>
        </div>

CSS

.d05-09-08{padding:20px;align-items:stretch}
        .d05-09-08-wrap{display:flex;flex-direction:column;gap:14px;width:100%}
        .d05-09-08-row{display:grid;grid-template-columns:52px 1fr 40px;align-items:center;gap:10px}
        .d05-09-08-tag{font-size:11px;color:#94a3b8;font-weight:700}
        .d05-09-08-track{height:14px;border-radius:7px;background:#f1f5f9;overflow:hidden}
        .d05-09-08-bar{display:block;height:100%;border-radius:7px}
        .d05-09-08-before{width:42%;background:#cbd5e1}
        .d05-09-08-after{width:87%;background:#16a34a}
        .d05-09-08-num{font-size:12px;font-weight:800;color:#1e293b;text-align:right}

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