CSSのみで星評価レーティングをデザインする方法

2020年4月7日

口コミ系のレビューサイトなどで使用されている星の評価（スターレーティング）は、特別に画像やJavaScriptなど用意する必要なく、CSSとHTMLのみでデザインできます。

非常に簡単に実装が出来るので、CSSとHTMLのサンプルと合わせてご確認ください。

星評価のCSSデザイン（星5個版）

まずは、よくレビューなどで使われている星5個の場合の設定をご確認ください。

CSS

.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

CSSの疑似要素を使用して、黄色で表示したい範囲をwidthで指定します。
widthの指定は属性セレクタを使用します。

HTML

星評価は、spanタグに、星評価用に作ったCSSの「star5_rating」と、cssを反映させるために用意した属性「dara-rate」に値を入れることで反映されます。

<p>
    <span class="star5_rating" data-rate="4"></span>
</p>
<p>
    <span class="star5_rating" data-rate="2.5"></span>
</p>

星5から星0までの記述をまとめましたのでご確認ください。

<p><span class="star5_rating" data-rate="5"></span> 星5</p>
<p><span class="star5_rating" data-rate="4.5"></span> 星4.5</p>
<p><span class="star5_rating" data-rate="4"></span> 星4</p>
<p><span class="star5_rating" data-rate="3.5"></span> 星3.5</p>
<p><span class="star5_rating" data-rate="3"></span> 星3</p>
<p><span class="star5_rating" data-rate="2.5"></span> 星2.5</p>
<p><span class="star5_rating" data-rate="2"></span> 星2</p>
<p><span class="star5_rating" data-rate="1.5"></span> 星1.5</p>
<p><span class="star5_rating" data-rate="1"></span> 星1</p>
<p><span class="star5_rating" data-rate="0.5"></span> 星0.5</p>
<p><span class="star5_rating" data-rate="0"></span> 星0</p>

星評価のCSSデザイン（星10個版）

あまり見かけませんが、念のため星10個用のデザインも用意しました。

基本的に疑似要素を細かく分けただけなので、その気になれば星20なども作ることが出来ます。

CSS

.star10_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star10_rating:before, .star10_rating:after{
    content: '★★★★★★★★★★';
}

.star10_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star10_rating[data-rate="10"]:after{ width: 100%; } /* 星10 */
.star10_rating[data-rate="9.5"]:after{ width: 95%; } /* 星9.5 */
.star10_rating[data-rate="9"]:after{ width: 90%; } /* 星9 */
.star10_rating[data-rate="8.5"]:after{ width: 85%; } /* 星8.5 */
.star10_rating[data-rate="8"]:after{ width: 80%; } /* 星8 */
.star10_rating[data-rate="7.5"]:after{ width: 75%; } /* 星7.5 */
.star10_rating[data-rate="7"]:after{ width: 70%; } /* 星7 */
.star10_rating[data-rate="6.5"]:after{ width: 65%; } /* 星6.5 */
.star10_rating[data-rate="6"]:after{ width: 60%; } /* 星6 */
.star10_rating[data-rate="5.5"]:after{ width: 55%; } /* 星5.5 */
.star10_rating[data-rate="5"]:after{ width: 50%; } /* 星5 */
.star10_rating[data-rate="4.5"]:after{ width: 45%; } /* 星4.5 */
.star10_rating[data-rate="4"]:after{ width: 40%; } /* 星4 */
.star10_rating[data-rate="3.5"]:after{ width: 35%; } /* 星3.5 */
.star10_rating[data-rate="3"]:after{ width: 30%; } /* 星3 */
.star10_rating[data-rate="2.5"]:after{ width: 25%; } /* 星2.5 */
.star10_rating[data-rate="2"]:after{ width: 20%; } /* 星2 */
.star10_rating[data-rate="1.5"]:after{ width: 15%; } /* 星1.5 */
.star10_rating[data-rate="1"]:after{ width: 10%; } /* 星1 */
.star10_rating[data-rate="0.5"]:after{ width: 5%; } /* 星0.5 */
.star10_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

HTML

<p><span class="star10_rating" data-rate="10"></span> 星10</p>
<p><span class="star10_rating" data-rate="9.5"></span> 星9.5</p>
<p><span class="star10_rating" data-rate="9"></span> 星9</p>
<p><span class="star10_rating" data-rate="8.5"></span> 星8.5</p>
<p><span class="star10_rating" data-rate="8"></span> 星8</p>
<p><span class="star10_rating" data-rate="7.5"></span> 星7.5</p>
<p><span class="star10_rating" data-rate="7"></span> 星7</p>
<p><span class="star10_rating" data-rate="6.5"></span> 星6.5</p>
<p><span class="star10_rating" data-rate="6"></span> 星6</p>
<p><span class="star10_rating" data-rate="5.5"></span> 星5.5</p>
<p><span class="star10_rating" data-rate="5"></span> 星5</p>
<p><span class="star10_rating" data-rate="4.5"></span> 星4.5</p>
<p><span class="star10_rating" data-rate="4"></span> 星4</p>
<p><span class="star10_rating" data-rate="3.5"></span> 星3.5</p>
<p><span class="star10_rating" data-rate="3"></span> 星3</p>
<p><span class="star10_rating" data-rate="2.5"></span> 星2.5</p>
<p><span class="star10_rating" data-rate="2"></span> 星2</p>
<p><span class="star10_rating" data-rate="1.5"></span> 星1.5</p>
<p><span class="star10_rating" data-rate="1"></span> 星1</p>
<p><span class="star10_rating" data-rate="0.5"></span> 星0.5</p>
<p><span class="star10_rating" data-rate="0"></span> 星0</p>

---

CSSとHTMLの設定だけで、簡単に星評価のデザインを組み込むことが出来ました。

レビューなどで使用する際は、星のレーティングの有無で見栄えがかなり良くなると思うので、是非ご活用ください。

以上、CSSのみで星評価レーティングをデザインする方法、でした。