【CSS】よくある星による評価システム
今回はよくある星による評価システムを作成する方法です。
なぜ星5段階評価システムが必要か？
UI/UXの向上: 星評価は直感的で使いやすい。
わかりやすさ: 評価が視覚的に表示されるため、わかりやすい。
手間を省く: 細かなレビューより星による評価だけだとユーザーからのフィードバックを得やすい。
コード
HTML
1
2
3
4
5
6
7
8
9
10
11
12
| <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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| .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;
}
|
サンプル
実行サンプルが以下になります。
