この記事で解説すること

まずは絵を見てください

こんな感じで星を中途半端な位置まで塗りつぶすオレオレコードを紹介します😎

FontAwesomeには半分だけの星アイコンが用意されているため、0.5刻みで塗りつぶすのは割と簡単にできます。
（調べるとそれなりの数の記事がヒットすると思います。）

ただ0.3とか0.8とかも表現したいとなると少し複雑なことをする必要があり、せっかくなので記事にしてみました。

とりあえずコードを見せろ（デモ）

お急ぎの方はこちらのコードをコピペしてお使いください⭐️

See the Pen Untitled by koki-73 (@koki-73) on CodePen.

軽く説明

以下の要領で実装しています

塗りつぶした星と枠線のみの星をpositionを使って重ねる
入力値を取得して、整数部分と小数部分を抽出する
整数の数だけ星を塗りつぶす
小数の割合だけ(整数+1)個目の星を塗りつぶす

※ 塗りつぶしは枠線の星の幅を基準にwidthを設定します

コードを見るとずいぶんまわりくどいやり方だなぁと感じると思います😕
いくつか疑問があるかもなので、少しQ&Aにしてみました

Q: `star-background`のwidthを指定すれば、foregroundのwidthはそれ基準でいいのでは？

A: font-sizeを指定しても星の大きさはその値と一致しないためです

以下fa-starクラスのfont-size、widthと、star-backgroundクラスのwidthを50pxで指定した時の、アイコンのbefore擬似要素の大きさです。

// こんな感じに指定されてる
.fa-star {
  font-size: 50px;
  width: 50px;
}
.star-background {
  width: 50px;
}

疑似要素の幅が56.25pxになるので、これ基準で塗りつぶしの幅を設定する必要があります。

Q: それなら56.25pxを調べておいて、それを使えばいいじゃん

A: 星の大きさを変更した時に変更が面倒なので...

もちろん星の大きさが変わることがないという要件であれば固定幅基準にしても良いかと思います。
（そんな要件を信用できるかは置いておきます）

Q: 星5つまとめてインラインブロックにしないの？

A: 星同士の隙間分塗りつぶし漏れになるので非推奨です

こんな感じでstars-foregroundの幅を変えて塗りつぶし幅を変えれば、一つの要素のみの操作で簡単にできそうです。

<div class="stars-foreground">
  <i class="fas fa-star"></i><i class="fas fa-star"><!-- 5個分続く... -->
</div>
<div class="stars-background">
  <i class="far fa-star"></i><i class="far fa-star"></i><!-- 5個分続く... -->
</div>

しかしこれだと星同士の隙間の中間がn.0の位置になるので、例えば1.8個分塗りつぶしたいのに2.0に見えてしまいます。（0.9ぐらい塗りつぶしと、星の枠線があることで全て塗りつぶされて見える）

↓1.8のとき

↓2.0のとき

（参考）星5つをまとめるやり方のデモはこちら

See the Pen star rating test by koki-73 (@koki-73) on CodePen.

星同士の隙間を作らずに並べる場合はこちらのほうが良いかもしれません

テンプレートエンジン使うなら

私は普段Railsを触っているので、ERBテンプレートならこんな感じになるよというのを一応載せておきます。
（cssはデモで使っているものを利用すれば大丈夫なはずです）

<div class="rating">
  <% 1.upto(5) do |i| %>
    <div class="star">
      <!-- ratingは3.7などの数字が入った変数が入っている想定 -->
      <% is_full = rating >= i %>
      <% is_empty = i - rating >= 1 %>
      <% fraction = is_empty ? 0 : rating - rating.floor %>
      <!-- JSで各星をどのくらい塗りつぶすか判定するためにdata属性に入れておく -->
      <div class="star-foreground" data-width-ratio="<%= is_full ? 1 : fraction %>">
        <i class="fas fa-star"></i>
      </div>
      <div class="star-background">
        <i class="far fa-star"></i>
      </div>
    </div>
  <% end %>
</div>
<script>
  const backgroundStarWidthPx = document.querySelector('.star-background').offsetWidth
  document.querySelectorAll('.star-foreground').forEach((elem) => {
    const ratio = parseFloat(elem.dataset.widthRatio)
    elem.style.width = `${backgroundStarWidthPx * ratio}px`;
  })
</script>

※ data-width-ratioを計算するロジックなんかはヘルパーに書いたほうがわかりやすいです
※ JavaScriptは本来別ファイルに分けた方が良いですが、デモ用に簡易的に書いてます

おまけ

デモではインラインブロックで並べていますが、それぞれの星ごとに塗りつぶししているので、フレックスボックスを使って隙間を大きく取ることも可能です

塗りつぶしアイコンと枠アイコンがあれば同じように塗りつぶしできるので、もちろん別のアイコンでも使えます

というわけで、こんな感じにもできます↓（死にかけ😇）

おわりに

「俺はもっと良いやり方を知ってるぜ」という方がいれば是非コメントくださいませ。

「役に立った😊」という方いらっしゃいましたらイイねくれると嬉しいです。

小数点ありの点数で中途半端に星を塗りつぶす（fontawesome利用）