パーツ番号 06-12-11 ・ CSSのみ

星の内訳グラフ付きレビュー集計

平均評価と星ごとの件数割合を横棒グラフで示す集計表示です。商品ページやサービス紹介ページのレビュー欄冒頭にまとめとして設置できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-12-11-wrap">
          <div class="d06-12-11-summary">
            <span class="d06-12-11-avg">4.6</span>
            <div class="d06-12-11-stars-lg">★★★★★</div>
            <span class="d06-12-11-total">全87件のレビュー</span>
          </div>
          <div class="d06-12-11-bars">
            <div class="d06-12-11-bar-row"><span class="d06-12-11-bar-label">5</span><span class="d06-12-11-bar-track"><span class="d06-12-11-bar-fill" style="width:78%"></span></span></div>
            <div class="d06-12-11-bar-row"><span class="d06-12-11-bar-label">4</span><span class="d06-12-11-bar-track"><span class="d06-12-11-bar-fill" style="width:14%"></span></span></div>
            <div class="d06-12-11-bar-row"><span class="d06-12-11-bar-label">3</span><span class="d06-12-11-bar-track"><span class="d06-12-11-bar-fill" style="width:5%"></span></span></div>
            <div class="d06-12-11-bar-row"><span class="d06-12-11-bar-label">2</span><span class="d06-12-11-bar-track"><span class="d06-12-11-bar-fill" style="width:2%"></span></span></div>
            <div class="d06-12-11-bar-row"><span class="d06-12-11-bar-label">1</span><span class="d06-12-11-bar-track"><span class="d06-12-11-bar-fill" style="width:1%"></span></span></div>
          </div>
        </div>

CSS

.d06-12-11-wrap{ width:100%; max-width:280px; display:flex; gap:16px; align-items:center; }
        .d06-12-11-summary{ display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
        .d06-12-11-avg{ font-size:26px; font-weight:800; color:#221f33; line-height:1; }
        .d06-12-11-stars-lg{ color:#f5a623; font-size:13px; letter-spacing:1px; }
        .d06-12-11-total{ font-size:9.5px; color:#8b87a3; white-space:nowrap; }
        .d06-12-11-bars{ flex:1; display:flex; flex-direction:column; gap:4px; }
        .d06-12-11-bar-row{ display:flex; align-items:center; gap:6px; }
        .d06-12-11-bar-label{ font-size:9.5px; color:#8b87a3; width:8px; }
        .d06-12-11-bar-track{ flex:1; height:6px; border-radius:3px; background:#eceef4; overflow:hidden; }
        .d06-12-11-bar-fill{ display:block; height:100%; background:linear-gradient(90deg,#f5a623,#ffc94d); border-radius:3px; }

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