星評価表示（◯◯ / 5）
星評価表示は、金色の星5つで「4.2 / 5」のような評価を読み取り専用で見せる UI です。仕組みは星を2層に重ねるテクニックで、下層に灰色の星5つ、その上に金色の星5つを重ね、上層に width:var(--p) と overflow:hidden を指定しています。
解説
星評価表示は、金色の星5つで「4.2 / 5」のような評価を読み取り専用で見せる UI です。仕組みは星を2層に重ねるテクニックで、下層に灰色の星5つ、その上に金色の星5つを重ね、上層に width:var(--p) と overflow:hidden を指定しています。--p:84% のように割合を渡すと、金色の星がその幅だけ見える形になり、4.2 のような小数の評価も星の途中まで塗って表現できます。星は SVG なので拡大しても輪郭が崩れません。
使う場面
- 商品レビューやサービス満足度の平均点を一目で伝えたいとき
- 口コミ一覧やレビューカードのヘッダー部分の評価表示に
- 飲食店・宿泊・アプリなどの星評価サマリーに
評価値を変えるには style="--p:84%" の数値を更新します。4.2 / 5 なら 84%、3.5 / 5 なら 70% といった具合に、点数を5で割って百分率にします。星の色 #fbb034 や大きさ font-size:24px も自由に調整できます。装飾的な星には aria-hidden が付いているので、読み上げ用に数値テキストを併記しておくと親切です。
よくある質問
4.2 のような半端な評価はどう表示しますか。
上層の星に渡す --p の値を変えます。点数を5で割って百分率にした数字を入れます。4.2 なら 84%、2.8 なら 56% と計算すると、星の途中まで金色に塗られます。
星の色や大きさは変えられますか。
色は .rd__fg の color:#fbb034 を、灰色の土台は .rd__bg の color を変えます。大きさは .rd__stars の font-size を変えると星全体が拡大縮小します。SVG なので拡大しても綺麗です。