CSSでレビュー用の星を表現する

一般的には星の数に合わせて画像を出し分けますが、ここではcssを使って表現する方法を解説します。

星はFont Awsomeのアイコンを使用し、カラーを変更することで表現していきます。

星アイコンの種類

Font Awsomeでは、以下のアイコンが無料で使えます。
これらに色をつけて並べることで簡単に表現することができます。

実装例

だいたいどこのレビューでも５段階評価なので、今回、0.0〜5.0まで0.5刻みでレビュー用の星を表現してみました。

イメージはこんな感じです。

実際のソースがこちらです。コピペで使えるので、もしよかったら使ってみてください。

<span class="star">
	<!--星0-->
	<i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
	<!--星0.5-->
	<i class="fas fa-star-half-alt"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
	<!--星1.0-->
	<i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
	<!--星1.5-->
	<i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
	<!--星2.0-->
	<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
	<!--星2.5-->
	<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i><i class="far fa-star"></i><i class="far fa-star"></i>
	<!--星3.0-->
	<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
	<!--星3.5-->
	<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i><i class="far fa-star"></i>
	<!--星4.0-->
	<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
	<!--星4.5-->
	<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
	<!--星5.0-->
	<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</span>

/*評価(星)*/
.star {
    color: #ffcc33;
}