【CSS】5段階評価の星評価で細かな表示を行う方法
星の評価システムで3.5など中途半端な値に簡単に対応する方法。
評価する時は5段階ですが平均値などを出すと3.5など中途半端な値になるので、その際の星の表示方法です。
コード
HTML
1
2
| <!-- % の箇所は塗りのパーセンテージを入れる -->
<div class="stars" style="--percent: 10%;"></div>
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| /* 変数設定 */
:root {
--star-size: 60px;
--star-color: #fff;
--star-background: #fc0;
}
/* 星評価のスタイル */
.stars {
display: inline-block;
font-size: var(--star-size);
font-family: Times;
line-height: 1;
}
.stars::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
|
サンプル
実行サンプルが以下になります。
