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

横棒グラフ(静止・複数項目)

複数の項目を固定長の横棒で比較する静止グラフです。流入経路の内訳などをレポート画面で見せる用途に使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d05-09-04-list">
          <li><span class="d05-09-04-label">検索</span><span class="d05-09-04-track"><span class="d05-09-04-bar d05-09-04-b1"></span></span><span class="d05-09-04-val">82%</span></li>
          <li><span class="d05-09-04-label">SNS</span><span class="d05-09-04-track"><span class="d05-09-04-bar d05-09-04-b2"></span></span><span class="d05-09-04-val">64%</span></li>
          <li><span class="d05-09-04-label">紹介</span><span class="d05-09-04-track"><span class="d05-09-04-bar d05-09-04-b3"></span></span><span class="d05-09-04-val">47%</span></li>
          <li><span class="d05-09-04-label">広告</span><span class="d05-09-04-track"><span class="d05-09-04-bar d05-09-04-b4"></span></span><span class="d05-09-04-val">31%</span></li>
        </ul>

CSS

.d05-09-04{padding:20px;align-items:stretch}
        .d05-09-04-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:12px}
        .d05-09-04-list li{display:grid;grid-template-columns:44px 1fr 38px;align-items:center;gap:10px}
        .d05-09-04-label{font-size:11.5px;color:#64748b;font-weight:600}
        .d05-09-04-track{height:10px;border-radius:5px;background:#eef1f5;overflow:hidden}
        .d05-09-04-bar{display:block;height:100%;border-radius:5px;background:#3b82f6}
        .d05-09-04-b1{width:82%}
        .d05-09-04-b2{width:64%;background:#6366f1}
        .d05-09-04-b3{width:47%;background:#818cf8}
        .d05-09-04-b4{width:31%;background:#a5b4fc}
        .d05-09-04-val{font-size:11.5px;color:#1e293b;font-weight:700;text-align:right}

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