2023/8/30

【CSS】よくある星による評価システム

【CSS】よくある星による評価システム

今回はよくある星による評価システムを作成する方法です。

なぜ星5段階評価システムが必要か？

UI/UXの向上: 星評価は直感的で使いやすい。 わかりやすさ: 評価が視覚的に表示されるため、わかりやすい。 手間を省く: 細かなレビューより星による評価だけだとユーザーからのフィードバックを得やすい。

コード

HTML

<div class="rate-form">
  <input id="star5" type="radio" name="rate" value="5">
  <label for="star5">★</label>
  <input id="star4" type="radio" name="rate" value="4">
  <label for="star4">★</label>
  <input id="star3" type="radio" name="rate" value="3">
  <label for="star3">★</label>
  <input id="star2" type="radio" name="rate" value="2">
  <label for="star2">★</label>
  <input id="star1" type="radio" name="rate" value="1">
  <label for="star1">★</label>
</div>

CSS

.rate-form {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.rate-form input[type=radio] {
  display: none;
}

.rate-form label {
  position: relative;
  padding: 0 5px;
  color: #ccc;
  cursor: pointer;
  font-size: 35px;
}

.rate-form label:hover {
  color: #ffcc00;
}

.rate-form label:hover ~ label {
  color: #ffcc00;
}

.rate-form input[type=radio]:checked ~ label {
  color: #ffcc00;
}

サンプル

実行サンプルが以下になります。