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

評価内訳バー(星ごとの割合表示)

5〜1星それぞれの割合を横棒で可視化する内訳表示。レビュー詳細セクションの集計表示に適する。

staticcss

プレビュー

ソースコード

HTML

<div class="rows">
          <div class="row"><span class="lb">5</span><div class="bar"><i style="width:70%"></i></div></div>
          <div class="row"><span class="lb">4</span><div class="bar"><i style="width:18%"></i></div></div>
          <div class="row"><span class="lb">3</span><div class="bar"><i style="width:7%"></i></div></div>
          <div class="row"><span class="lb">2</span><div class="bar"><i style="width:3%"></i></div></div>
          <div class="row"><span class="lb">1</span><div class="bar"><i style="width:2%"></i></div></div>
        </div>

CSS

.d09-11-04 .rows{ width:100%; max-width:220px; display:flex; flex-direction:column; gap:6px; }
        .d09-11-04 .row{ display:flex; align-items:center; gap:8px; }
        .d09-11-04 .lb{ font-size:12px; color:#8a8f98; width:10px; }
        .d09-11-04 .bar{ flex:1; height:8px; border-radius:4px; background:#eef0f3; overflow:hidden; }
        .d09-11-04 .bar i{ display:block; height:100%; background:#f5a623; border-radius:4px; }

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