お客様の声や商品紹介、比較記事などで、評価をひと目で伝えたい時に便利なのが星の評価表示です。

この記事では、コピペするだけで使える星評価・レビューのデザインを20個まとめました。
シンプルな星5つから、4.5のような小数点の評価、評価の内訳バー、レビューカード、クリックで選べる星まで、場面ごとに使い分けられる種類を用意しています。

画像は使わず、HTMLとCSSだけで作っています。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、評価を表示したい場所に貼り付けます。

星の数は、HTMLの中の「–rate:4」の数字で変えられます。0〜5の間で、3.7のような小数も使えます。
表示する数値の文字（4.0など）も、あわせて書き換えてください。

01. シンプルな星5つ

星の数で評価を見せる、もっとも定番のタイプです。

実際の見た目

HTMLコード

<div class="kts-star01"><span class="kts-star01-stars" style="--rate:4"></span></div>

CSSコード

.kts-star01 { font-family: sans-serif; }
.kts-star01-stars { display: inline-block; position: relative; font-size: 22px; line-height: 1; letter-spacing: 2px; }
.kts-star01-stars::before { content: "★★★★★"; color: #D1D5DB; }
.kts-star01-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }

02. 数値付きの星

星の横に「4.0」のような点数を添えた、正確さが伝わるタイプです。

実際の見た目

HTMLコード

<div class="kts-star02"><span class="kts-star02-stars" style="--rate:4"></span><span class="kts-star02-num">4.0</span></div>

CSSコード

.kts-star02 { font-family: sans-serif; }
.kts-star02-stars { display: inline-block; position: relative; font-size: 22px; line-height: 1; letter-spacing: 2px; }
.kts-star02-stars::before { content: "★★★★★"; color: #D1D5DB; }
.kts-star02-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star02 { display: flex; align-items: center; gap: 8px; }
.kts-star02-num { font-size: 18px; font-weight: 700; color: #111827; }

03. 半分の星も表せるタイプ

4.5や3.7のような、小数点の評価も星の塗り具合で表せるタイプです。

実際の見た目

HTMLコード

<div class="kts-star03"><span class="kts-star03-stars" style="--rate:3.7"></span><span class="kts-star03-num">3.7</span></div>

CSSコード

.kts-star03 { font-family: sans-serif; }
.kts-star03-stars { display: inline-block; position: relative; font-size: 26px; line-height: 1; letter-spacing: 2px; }
.kts-star03-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star03-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #FBBF24; }
.kts-star03 { display: flex; align-items: center; gap: 8px; }
.kts-star03-num { font-size: 18px; font-weight: 700; color: #92400E; }

04. 件数付きの小さめタイプ

商品一覧などで使いやすい、レビュー件数を添えた小さなタイプです。

実際の見た目

HTMLコード

<div class="kts-star04"><span class="kts-star04-stars" style="--rate:4.3"></span><span class="kts-star04-num">4.3</span><span class="kts-star04-count">（128件）</span></div>

CSSコード

.kts-star04 { font-family: sans-serif; }
.kts-star04-stars { display: inline-block; position: relative; font-size: 14px; line-height: 1; letter-spacing: 2px; }
.kts-star04-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star04-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star04 { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.kts-star04-num { font-weight: 700; color: #B45309; }
.kts-star04-count { color: #6B7280; }

05. 大きく見せる総合評価

点数を大きく表示した、レビューページの一番上に置くタイプです。

実際の見た目

HTMLコード

<div class="kts-star05"><div class="kts-star05-score">4.6</div><div><span class="kts-star05-stars" style="--rate:4.6"></span><div class="kts-star05-count">レビュー 256件</div></div></div>

CSSコード

.kts-star05 { font-family: sans-serif; }
.kts-star05-stars { display: inline-block; position: relative; font-size: 24px; line-height: 1; letter-spacing: 2px; }
.kts-star05-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star05-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star05 { display: flex; align-items: center; gap: 16px; }
.kts-star05-score { font-size: 48px; font-weight: 800; line-height: 1; color: #111827; }
.kts-star05-count { margin-top: 4px; font-size: 13px; color: #6B7280; }

06. ハートで見せる評価

星のかわりにハートを使った、かわいらしい雰囲気のタイプです。

実際の見た目

HTMLコード

<div class="kts-star06"><span class="kts-star06-hearts" style="--rate:3"></span></div>

CSSコード

.kts-star06 { font-family: sans-serif; }
.kts-star06-hearts { display: inline-block; position: relative; font-size: 24px; line-height: 1; letter-spacing: 3px; }
.kts-star06-hearts::before { content: "♥♥♥♥♥"; color: #FBCFE8; }
.kts-star06-hearts::after { content: "♥♥♥♥♥"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #EC4899; }

07. レビューカード

星・名前・感想をまとめた、お客様の声に使えるカードです。

実際の見た目

HTMLコード

<div class="kts-star07">
  <div class="kts-star07-head"><span class="kts-star07-stars" style="--rate:5"></span><span class="kts-star07-date">2026/10/01</span></div>
  <div class="kts-star07-title">とても丁寧に教えてもらえました</div>
  <div class="kts-star07-text">初心者でもわかりやすく、その日のうちに使えるようになりました。</div>
  <div class="kts-star07-name">40代・女性</div>
</div>

CSSコード

.kts-star07 { font-family: sans-serif; }
.kts-star07-stars { display: inline-block; position: relative; font-size: 18px; line-height: 1; letter-spacing: 2px; }
.kts-star07-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star07-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star07 { padding: 18px 20px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; }
.kts-star07-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kts-star07-date { font-size: 12px; color: #9CA3AF; }
.kts-star07-title { margin-bottom: 6px; font-weight: 700; color: #111827; }
.kts-star07-text { margin-bottom: 10px; font-size: 14px; line-height: 1.7; color: #4B5563; }
.kts-star07-name { font-size: 12px; color: #6B7280; }

08. 評価の内訳バー

星5〜1それぞれの割合を横棒で見せる、通販サイトでおなじみのタイプです。

実際の見た目

HTMLコード

<div class="kts-star08">
  <div class="kts-star08-row"><span>★5</span><div class="kts-star08-bar"><div style="width:62%"></div></div><span>62%</span></div>
  <div class="kts-star08-row"><span>★4</span><div class="kts-star08-bar"><div style="width:24%"></div></div><span>24%</span></div>
  <div class="kts-star08-row"><span>★3</span><div class="kts-star08-bar"><div style="width:8%"></div></div><span>8%</span></div>
  <div class="kts-star08-row"><span>★2</span><div class="kts-star08-bar"><div style="width:4%"></div></div><span>4%</span></div>
  <div class="kts-star08-row"><span>★1</span><div class="kts-star08-bar"><div style="width:2%"></div></div><span>2%</span></div>
</div>

CSSコード

.kts-star08 { font-family: sans-serif; }
.kts-star08 { max-width: 360px; }
.kts-star08-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: #374151; }
.kts-star08-row span:first-child { flex: 0 0 30px; color: #B45309; font-weight: 700; }
.kts-star08-row span:last-child { flex: 0 0 36px; text-align: right; color: #6B7280; }
.kts-star08-bar { flex: 1; height: 10px; background: #F3F4F6; border-radius: 5px; overflow: hidden; }
.kts-star08-bar div { height: 100%; background: #F59E0B; }

09. 点数のバッジ

点数を色付きのバッジにした、ひと目で評価が伝わるタイプです。

実際の見た目

HTMLコード

<div class="kts-star09"><span class="kts-star09-badge">★ 4.8</span><span class="kts-star09-label">とても良い</span></div>

CSSコード

.kts-star09 { font-family: sans-serif; }
.kts-star09 { display: flex; align-items: center; gap: 10px; }
.kts-star09-badge { padding: 4px 12px; background: #16A34A; color: #fff; border-radius: 6px; font-weight: 800; }
.kts-star09-label { font-size: 14px; font-weight: 700; color: #166534; }

10. 項目別の評価

「味」「価格」「雰囲気」のように、項目ごとの評価を並べるタイプです。

実際の見た目

HTMLコード

<div class="kts-star10">
  <div class="kts-star10-row"><span class="kts-star10-name">味</span><span class="kts-star10-stars" style="--rate:5"></span></div>
  <div class="kts-star10-row"><span class="kts-star10-name">価格</span><span class="kts-star10-stars" style="--rate:4"></span></div>
  <div class="kts-star10-row"><span class="kts-star10-name">雰囲気</span><span class="kts-star10-stars" style="--rate:3.5"></span></div>
</div>

CSSコード

.kts-star10 { font-family: sans-serif; }
.kts-star10-stars { display: inline-block; position: relative; font-size: 18px; line-height: 1; letter-spacing: 2px; }
.kts-star10-stars::before { content: "★★★★★"; color: #FEE2E2; }
.kts-star10-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #EF4444; }
.kts-star10-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.kts-star10-name { flex: 0 0 60px; font-size: 14px; color: #374151; }

11. クリックで選べる星

星をクリックして評価を選べる、レビュー投稿フォーム向けのタイプです。

実際の見た目

HTMLコード

<div class="kts-star11">
  <input type="radio" name="kts-star11" id="kts-star11-5" value="5"><label for="kts-star11-5">★</label>
  <input type="radio" name="kts-star11" id="kts-star11-4" value="4"><label for="kts-star11-4">★</label>
  <input type="radio" name="kts-star11" id="kts-star11-3" value="3" checked><label for="kts-star11-3">★</label>
  <input type="radio" name="kts-star11" id="kts-star11-2" value="2"><label for="kts-star11-2">★</label>
  <input type="radio" name="kts-star11" id="kts-star11-1" value="1"><label for="kts-star11-1">★</label>
</div>

CSSコード

.kts-star11 { font-family: sans-serif; }
.kts-star11 { display: inline-flex; flex-direction: row-reverse; }
.kts-star11 input { display: none; }
.kts-star11 label { padding: 0 2px; font-size: 30px; line-height: 1; color: #D1D5DB; cursor: pointer; transition: color .2s; }
.kts-star11 input:checked ~ label, .kts-star11 label:hover, .kts-star11 label:hover ~ label { color: #F59E0B; }

12. ダークカラーのタイプ

黒系の背景で、引き締まった印象にしたい時のタイプです。

実際の見た目

HTMLコード

<div class="kts-star12"><span class="kts-star12-stars" style="--rate:4.2"></span><span class="kts-star12-num">4.2</span></div>

CSSコード

.kts-star12 { font-family: sans-serif; }
.kts-star12-stars { display: inline-block; position: relative; font-size: 22px; line-height: 1; letter-spacing: 2px; }
.kts-star12-stars::before { content: "★★★★★"; color: #374151; }
.kts-star12-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #FACC15; }
.kts-star12 { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: #111827; border-radius: 999px; }
.kts-star12-num { font-weight: 700; color: #F9FAFB; }

13. グラデーションの星

星にグラデーションをかけた、華やかなタイプです。

実際の見た目

HTMLコード

<div class="kts-star13"><span class="kts-star13-stars">★★★★★</span></div>

CSSコード

.kts-star13 { font-family: sans-serif; }
.kts-star13-stars { font-size: 28px; letter-spacing: 3px; background: linear-gradient(90deg, #F97316, #EC4899 80%, #E5E7EB 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }

14. 丸いドットで見せる評価

●●●●○のように、丸の数で評価を示すシンプルなタイプです。

実際の見た目

HTMLコード

<div class="kts-star14"><span class="on"></span><span class="on"></span><span class="on"></span><span class="on"></span><span></span><em>おすすめ度</em></div>

CSSコード

.kts-star14 { font-family: sans-serif; }
.kts-star14 { display: flex; align-items: center; gap: 6px; }
.kts-star14 span { width: 14px; height: 14px; border-radius: 50%; background: #E5E7EB; }
.kts-star14 span.on { background: #0EA5E9; }
.kts-star14 em { margin-left: 6px; font-style: normal; font-size: 13px; color: #0369A1; }

15. おすすめ度のラベル付き

「おすすめ度」の見出しと星をセットにした、比較記事などで使えるタイプです。

実際の見た目

HTMLコード

<div class="kts-star15"><span class="kts-star15-label">おすすめ度</span><span class="kts-star15-stars" style="--rate:4.5"></span></div>

CSSコード

.kts-star15 { font-family: sans-serif; }
.kts-star15-stars { display: inline-block; position: relative; font-size: 20px; line-height: 1; letter-spacing: 2px; }
.kts-star15-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star15-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star15 { display: inline-flex; align-items: center; border: 1px solid #FDE68A; border-radius: 8px; overflow: hidden; }
.kts-star15-label { padding: 8px 12px; background: #FEF3C7; color: #92400E; font-size: 13px; font-weight: 700; }
.kts-star15 .kts-star15-stars { margin: 0 12px; }

16. 総合評価と内訳のセット

大きな点数と内訳バーを並べた、本格的なレビュー表示です。

実際の見た目

HTMLコード

<div class="kts-star16">
  <div class="kts-star16-left"><div class="kts-star16-score">4.4</div><span class="kts-star16-stars" style="--rate:4.4"></span><div class="kts-star16-count">98件</div></div>
  <div class="kts-star16-right">
    <div class="kts-star16-row"><span>5</span><div class="kts-star16-bar"><div style="width:58%"></div></div></div>
    <div class="kts-star16-row"><span>4</span><div class="kts-star16-bar"><div style="width:26%"></div></div></div>
    <div class="kts-star16-row"><span>3</span><div class="kts-star16-bar"><div style="width:10%"></div></div></div>
    <div class="kts-star16-row"><span>2</span><div class="kts-star16-bar"><div style="width:4%"></div></div></div>
    <div class="kts-star16-row"><span>1</span><div class="kts-star16-bar"><div style="width:2%"></div></div></div>
  </div>
</div>

CSSコード

.kts-star16 { font-family: sans-serif; }
.kts-star16-stars { display: inline-block; position: relative; font-size: 16px; line-height: 1; letter-spacing: 2px; }
.kts-star16-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star16-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star16 { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 20px; background: #F9FAFB; border-radius: 12px; }
.kts-star16-left { text-align: center; }
.kts-star16-score { font-size: 40px; font-weight: 800; line-height: 1.1; color: #111827; }
.kts-star16-count { margin-top: 2px; font-size: 12px; color: #6B7280; }
.kts-star16-right { flex: 1; min-width: 180px; }
.kts-star16-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; color: #6B7280; }
.kts-star16-bar { flex: 1; height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.kts-star16-bar div { height: 100%; background: #F59E0B; }

17. 枠線だけの星

塗りつぶさない「☆」と組み合わせた、上品な印象のタイプです。

実際の見た目

HTMLコード

<div class="kts-star17"><span class="kts-star17-on">★★★</span><span class="kts-star17-off">☆☆</span></div>

CSSコード

.kts-star17 { font-family: sans-serif; }
.kts-star17 { font-size: 24px; letter-spacing: 2px; }
.kts-star17-on { color: #A16207; }
.kts-star17-off { color: #A16207; opacity: .6; }

18. 商品カードの中の評価

商品名・星・価格をまとめた、ネットショップ向けのカードです。

実際の見た目

HTMLコード

<div class="kts-star18">
  <div class="kts-star18-img">商品画像</div>
  <div class="kts-star18-body">
    <div class="kts-star18-name">手作りハンドクリーム</div>
    <div class="kts-star18-rate"><span class="kts-star18-stars" style="--rate:4.5"></span><span>(42)</span></div>
    <div class="kts-star18-price">1,980円</div>
  </div>
</div>

CSSコード

.kts-star18 { font-family: sans-serif; }
.kts-star18-stars { display: inline-block; position: relative; font-size: 15px; line-height: 1; letter-spacing: 2px; }
.kts-star18-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star18-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star18 { max-width: 240px; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.kts-star18-img { height: 140px; display: flex; align-items: center; justify-content: center; background: #FDF2F8; color: #BE185D; font-size: 13px; }
.kts-star18-body { padding: 14px 16px; }
.kts-star18-name { margin-bottom: 6px; font-weight: 700; color: #111827; }
.kts-star18-rate { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12px; color: #6B7280; }
.kts-star18-price { font-size: 18px; font-weight: 800; color: #DC2626; }

19. 2つを並べて比べるタイプ

プランや商品の評価を横に並べて比べる、比較記事向けのタイプです。

実際の見た目

HTMLコード

<div class="kts-star19">
  <div class="kts-star19-col"><div class="kts-star19-name">プランA</div><span class="kts-star19-stars" style="--rate:4.5"></span><div class="kts-star19-num">4.5</div></div>
  <div class="kts-star19-col"><div class="kts-star19-name">プランB</div><span class="kts-star19-stars" style="--rate:3.5"></span><div class="kts-star19-num">3.5</div></div>
</div>

CSSコード

.kts-star19 { font-family: sans-serif; }
.kts-star19-stars { display: inline-block; position: relative; font-size: 18px; line-height: 1; letter-spacing: 2px; }
.kts-star19-stars::before { content: "★★★★★"; color: #E5E7EB; }
.kts-star19-stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rate) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #F59E0B; }
.kts-star19 { display: flex; gap: 12px; }
.kts-star19-col { flex: 1; padding: 16px; border: 1px solid #E5E7EB; border-radius: 10px; text-align: center; }
.kts-star19-name { margin-bottom: 8px; font-weight: 700; color: #111827; }
.kts-star19-num { margin-top: 4px; font-size: 20px; font-weight: 800; color: #B45309; }

20. キラッと光る星

星がゆっくり光って目を引く、動きのあるタイプです。

実際の見た目

HTMLコード

<div class="kts-star20"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>

CSSコード

.kts-star20 { font-family: sans-serif; }
.kts-star20 { display: inline-flex; gap: 3px; font-size: 26px; color: #F59E0B; }
.kts-star20 span { animation: kts-star20-shine 2s ease-in-out infinite; }
.kts-star20 span:nth-child(2) { animation-delay: .2s; }
.kts-star20 span:nth-child(3) { animation-delay: .4s; }
.kts-star20 span:nth-child(4) { animation-delay: .6s; }
.kts-star20 span:nth-child(5) { animation-delay: .8s; }
@keyframes kts-star20-shine { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.2); filter: brightness(1.3); } }

カスタマイズの小ワザ

• 星の数は「–rate」の数字（0〜5）で変えられます。小数にすると、星が途中まで塗られます。
• 08番と16番の内訳バーは、「width:62%」のような数字を書き換えて調整してください。
• 11番のクリックで選べる星は見た目だけの部品です。実際に評価を受け付けるには、お問い合わせフォームなどの仕組みと組み合わせてください。
• お客様の評価を載せる時は、実際にいただいた評価だけを使い、内容を変えずに掲載しましょう。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面	該当する星評価
シンプルに見せたい	01, 02, 17
小数点の評価	03, 05, 16
商品一覧・ネットショップ	04, 18
かわいい雰囲気	06, 14
お客様の声	07
評価の内訳を見せたい	08, 16
ひと目で伝えたい	09, 15
項目ごとに評価	10
レビュー投稿フォーム	11
雰囲気を変えたい	12, 13, 20
比較記事	15, 19

20個の星評価・レビューデザインは、画像を使わずHTMLとCSSだけで作れる。星の数は--rateの数値で変更でき、小数を指定すると星が途中まで塗られる。