← 動的パーツギャラリーへ戻る

パーツ番号 10-01-11 ・ CSSのみ

商品レビュー星評価サマリー

平均評価と星の数、星ごとの内訳を横棒グラフで表示するレビューサマリー。WooCommerceの商品詳細ページのレビュー欄冒頭に配置すると説得力が増します。

eccss

プレビュー

ソースコード

HTML

<div class="d10-01-11-box">
          <div class="d10-01-11-avg">
            <span class="d10-01-11-num">4.6</span>
            <span class="d10-01-11-stars">★★★★☆</span>
            <span class="d10-01-11-cnt">238件のレビュー</span>
          </div>
          <div class="d10-01-11-bars">
            <div class="d10-01-11-row"><span>5</span><span class="d10-01-11-track"><i style="width:78%"></i></span></div>
            <div class="d10-01-11-row"><span>4</span><span class="d10-01-11-track"><i style="width:14%"></i></span></div>
            <div class="d10-01-11-row"><span>3</span><span class="d10-01-11-track"><i style="width:5%"></i></span></div>
            <div class="d10-01-11-row"><span>2</span><span class="d10-01-11-track"><i style="width:2%"></i></span></div>
            <div class="d10-01-11-row"><span>1</span><span class="d10-01-11-track"><i style="width:1%"></i></span></div>
          </div>
        </div>

CSS

.d10-01-11{background:#f6f7fb}
        .d10-01-11-box{display:flex;gap:22px;align-items:center;background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 8px 24px rgba(30,40,80,.08)}
        .d10-01-11-avg{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}
        .d10-01-11-num{font-size:32px;font-weight:800;color:#1e293b;line-height:1}
        .d10-01-11-stars{color:#f59e0b;font-size:14px;letter-spacing:1px}
        .d10-01-11-cnt{font-size:10.5px;color:#94a3b8;margin-top:2px;white-space:nowrap}
        .d10-01-11-bars{flex:1;display:flex;flex-direction:column;gap:5px;min-width:120px}
        .d10-01-11-row{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#64748b}
        .d10-01-11-track{flex:1;height:6px;border-radius:3px;background:#eef2ff;overflow:hidden}
        .d10-01-11-track i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);border-radius:3px}

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