星評価（レーティング） デザイン見本
星（★）をクリック／ホバーして点数を選べるインタラクティブな星評価と、CSSだけで小数点の平均点を表示する方法をまとめた実装デモ。コピーしてすぐに使える HTML・CSS・JS のコードを掲載。
HTML・CSS・JSコードプレビューツール にて実装確認ができます。
① クリックで点数を選ぶ星評価（入力用）
ホバー／クリックで評価してください
<div class="star-rating" id="star-rating">
<button type="button" class="star" aria-label="1点">★</button>
<button type="button" class="star" aria-label="2点">★</button>
<button type="button" class="star" aria-label="3点">★</button>
<button type="button" class="star" aria-label="4点">★</button>
<button type="button" class="star" aria-label="5点">★</button>
</div>
<p class="star-output" id="star-output">未評価</p>.star-rating {
display: inline-flex;
gap: 4px;
}
.star {
background: none;
border: none;
padding: 0;
font-size: 32px;
line-height: 1;
cursor: pointer;
color: #d1d5db;
transition: color 0.15s ease, transform 0.15s ease;
}
.star:hover {
transform: scale(1.15);
}
.star.on {
color: #f59e0b;
}
.star-output {
margin: 10px 0 0;
font-size: 14px;
font-weight: 600;
color: #374151;
}(function () {
var wrap = document.getElementById('star-rating');
var out = document.getElementById('star-output');
if (!wrap) return;
var stars = wrap.querySelectorAll('.star');
var rating = 0;
function paint(n) {
stars.forEach(function (s, i) {
s.className = i < n ? 'star on' : 'star';
});
}
stars.forEach(function (s, i) {
s.addEventListener('mouseenter', function () { paint(i + 1); });
s.addEventListener('click', function () {
rating = i + 1;
paint(rating);
if (out) out.textContent = rating + ' / 5';
});
});
wrap.addEventListener('mouseleave', function () { paint(rating); });
})();星に mouseenter したときは「その星まで」を金色にして仮表示し、コンテナから mouseleave したら確定済みの点数（rating）に戻す。クリックで rating を確定させて表示を更新する。星は ★（★）を常に並べておき、点灯／消灯は文字色の切り替えだけで表現するのがポイント。button 要素にして aria-label を付けるとキーボードやスクリーンリーダーにも対応できる。
② 小数点の平均点を表示（CSSだけ・JS不要）
<div class="star-display" style="--rate: 86%;">
<div class="star-display-base">★★★★★</div>
<div class="star-display-fill">★★★★★</div>
</div>
<span class="star-score">4.3</span>.star-display {
position: relative;
display: inline-block;
font-size: 28px;
line-height: 1;
letter-spacing: 2px;
}
.star-display-base {
color: #d1d5db;
}
.star-display-fill {
position: absolute;
top: 0;
left: 0;
width: var(--rate);
overflow: hidden;
white-space: nowrap;
color: #f59e0b;
}
.star-score {
margin-left: 8px;
font-size: 16px;
font-weight: 700;
color: #374151;
vertical-align: middle;
}同じ ★★★★★ を2枚重ね、下はグレー、上は金色にする。上の金色レイヤーに overflow: hidden を掛け、width を「点数 ÷ 5 × 100%」にすると、指定した割合だけ星が金色に見える。4.3点なら 86% を指定するだけ。カスタムプロパティ（–rate）で幅を渡せば、点数を変えたいときに1か所直すだけで済む。JavaScript を使わずレビュー平均などの表示ができる。
③ 色・形・サイズのバリエーション
<span class="stars gold">★★★★★</span>
<span class="stars heart">♥♥♥♥♥</span>
<span class="stars teal big">★★★★★</span>.stars {
letter-spacing: 3px;
font-size: 24px;
line-height: 1;
}
.stars.gold { color: #f59e0b; }
.stars.heart { color: #ef4444; }
.stars.teal { color: #14b8a6; }
.stars.big { font-size: 34px; }星は画像ではなく文字（★＝★ / ♥＝♥）なので、色は color、大きさは font-size を変えるだけで自由に調整できる。記号を ♥ に差し替えれば「いいね」風のハート評価にもなる。文字なので拡大しても輪郭がぼやけず、読み込みも速い。星の間隔は letter-spacing で整える。
<button> にして aria-label（例:「3点」）を付けると、キーボード操作やスクリーンリーダーにも対応できます。表示専用の平均点には、数値（例: 4.3）もあわせて置くと確実に伝わります。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
