パーツ番号 06-01-05 ・ CSSのみ

星評価サマリー

平均点と各星の割合バーを表示。バーは画面表示時に伸びます。商品・サービスの総合評価をひと目で伝えるのに便利です。

scrollcss

プレビュー

ソースコード

HTML

<div class="d06-01-05-box io-reveal">
          <div class="d06-01-05-head">
            <div class="d06-01-05-avg">4.8</div>
            <div><div class="d06-01-05-stars">★★★★★</div><div class="d06-01-05-count">327件の評価</div></div>
          </div>
          <div class="d06-01-05-rows">
            <div class="d06-01-05-row"><span>5</span><i class="d06-01-05-bar" style="--w:82%"></i><b>82%</b></div>
            <div class="d06-01-05-row"><span>4</span><i class="d06-01-05-bar" style="--w:13%"></i><b>13%</b></div>
            <div class="d06-01-05-row"><span>3</span><i class="d06-01-05-bar" style="--w:3%"></i><b>3%</b></div>
            <div class="d06-01-05-row"><span>2</span><i class="d06-01-05-bar" style="--w:1%"></i><b>1%</b></div>
            <div class="d06-01-05-row"><span>1</span><i class="d06-01-05-bar" style="--w:1%"></i><b>1%</b></div>
          </div>
        </div>

CSS

.d06-01-05{background:linear-gradient(135deg,#fffbeb,#fff7ed)}
        .d06-01-05-box{width:300px;background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(160,120,20,.12)}
        .d06-01-05-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
        .d06-01-05-avg{font-size:44px;font-weight:800;color:#1f2937;line-height:1}
        .d06-01-05-head .d06-01-05-stars{color:#ffb400;font-size:16px;letter-spacing:2px}
        .d06-01-05-count{color:#9ca3af;font-size:12px;margin-top:4px}
        .d06-01-05-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:#6b7280}
        .d06-01-05-row span{width:12px;text-align:right;font-weight:700}
        .d06-01-05-bar{flex:1;height:8px;border-radius:4px;background:#f3e9c8;position:relative;overflow:hidden}
        .d06-01-05-bar::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:4px;transition:width 1s cubic-bezier(.4,0,.2,1)}
        .d06-01-05-box.is-in .d06-01-05-bar::after{width:var(--w)}
        .d06-01-05-row b{width:34px;text-align:right;color:#374151}

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