CSSだけでレビュー用の星評価コンポーネント（Five-Star）を作成する方法

仕様

• JavaScript を使用せずに動作すること
• 評価範囲は 0〜5 とし、それを表現できること
• 評価値を色で塗りつぶして表現すること
• クリックしても何も動作しない、見た目だけのコンポーネントであること

実装

HTML

★ をラップする形で実装する。

<!-- 星は Font Awesome を利用しているが「★」でも良い -->
<div class="five-star" style="--rating: 5;">
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
</div>

CSS Custom Properties（--rating）で評価値（星の塗りつぶしの割合）を指定する。

CSS

CSS は以下のように実装する。

.five-star {
  // 変数
  --star-color: #fff;
  --star-fill: #ffd43b;
  --percent: calc(var(--rating) / 5 * 100%);

  // スタイル
  display: flex;
  background: linear-gradient(90deg, var(--star-fill) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

割合の計算

HTML から渡された評価値を元に、--percentを計算する。

--percent: calc(var(--rating) / 5 * 100%);

星は 5 つあるため、評価値を 5 で割ってパーセントに変換する。星の最大数に合わせて、この値を調整すれば良い。

星をマスクする

まず、background: linear-gradient()を利用して全体に塗りつぶしを実装する。塗りつぶしを行うと以下のようになる。

わかりやすく黒色を背景にしているが、この部分が見えない部分になる。

次に、-webkit-background-clip: text;を利用して、★ の部分だけを塗りつぶすようにする。

最後に、-webkit-text-fill-color: transparent;を利用して、★ の部分を透明にする。

デモ