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

レビュー件数+平均評価の信頼表示

星評価と平均点、レビュー件数を組み合わせて表示。実際の利用者数の多さを可視化し購入・申込の後押しとなる。

css

プレビュー

ソースコード

HTML

<div class="d09-05-09-block">
          <div class="d09-05-09-stars">
            <svg viewBox="0 0 20 20" width="18" height="18" fill="#e0a72e"><path d="M10 1l2.6 5.9 6.4.6-4.8 4.3 1.4 6.2L10 14.9 4.4 18l1.4-6.2L1 7.5l6.4-.6z"/></svg>
            <svg viewBox="0 0 20 20" width="18" height="18" fill="#e0a72e"><path d="M10 1l2.6 5.9 6.4.6-4.8 4.3 1.4 6.2L10 14.9 4.4 18l1.4-6.2L1 7.5l6.4-.6z"/></svg>
            <svg viewBox="0 0 20 20" width="18" height="18" fill="#e0a72e"><path d="M10 1l2.6 5.9 6.4.6-4.8 4.3 1.4 6.2L10 14.9 4.4 18l1.4-6.2L1 7.5l6.4-.6z"/></svg>
            <svg viewBox="0 0 20 20" width="18" height="18" fill="#e0a72e"><path d="M10 1l2.6 5.9 6.4.6-4.8 4.3 1.4 6.2L10 14.9 4.4 18l1.4-6.2L1 7.5l6.4-.6z"/></svg>
            <svg viewBox="0 0 20 20" width="18" height="18" fill="#e0a72e"><path d="M10 1l2.6 5.9 6.4.6-4.8 4.3 1.4 6.2L10 14.9 4.4 18l1.4-6.2L1 7.5l6.4-.6z" opacity="0.35"/></svg>
          </div>
          <span class="d09-05-09-score">4.7</span>
          <span class="d09-05-09-count">1,200件のレビュー</span>
        </div>

CSS

.d09-05-09-block{ display:flex; flex-direction:column; align-items:center; gap:6px; }
        .d09-05-09-stars{ display:flex; gap:2px; }
        .d09-05-09-score{ font-size:22px; font-weight:800; color:#3a3a3a; }
        .d09-05-09-count{ font-size:11.5px; color:#8a8a8a; }

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