Font Awesomeを使った星マークのレーティング表示のスマートな方法

こんにちは、社員Kです。

さて本日は、某グルメサイトなどのレビューサイトでよく見る星マークで表示するレーティング表示のHTML/CSSをご紹介します。

星マークの表示は、Font Awesome という無料で使えるアイコンフォントのライブラリを使用してやってみます。

Font Awesomeとは？

今回、星マークの表示に使用するのは「Font Awesome」というアイコンフォントのライブラリです。
無料で使用できてCSSファイル（またはJSファイル）を読み込むだけで簡単に利用できる非常に使い勝手の良いアイコンフォントです。

今回は最新バージョンの 5.12を使用します。
読み込み方法は、CDNライブラリから下記のように設置するだけ。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />

iタグを使って単純にアイコンを並べるだけの書き方

星マークの書き方ですが、下記のようなタグを使用します。

塗りつぶし用 <i class="fas fa-star"></i>
空欄用 <i class="far fa-star"></i>
半分 <i class="fas fa-star-half-alt"></i>

このタグをただ単純に続けて書くだけでも一応はレーティング表示っぽく見せることが可能です。

See the Pen
FontAwesomeを使った星レーティングの表示（シンプル版） by y.kawabata (@ykawabata)
on CodePen.

ただ、この書き方だとコードの可読性やメンテナンス性が非常に悪く、オススメできません。
そんなときは、次にご紹介する 疑似要素を使ったやり方にすると、よりスマートな書き方ができます。

疑似要素の:beforeと:afterを使ったスマートな書き方

Font Awesome のアイコンを疑似要素で表示するには下記のようにCSSでフォント名の指定とウェイト・Unicodeの指定を行います。

/* 例) 塗りつぶした星マークの場合 */
.star:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f005";
}

<span class="star"></star>

今回は、レーティング表示で使用したいため下記の3種類の星マークが必要です。

• 塗りつぶした星マークの表示 Unicode: f005
• 枠線だけの空白の星マークの表示 Unicode: f005
• 半分だけ塗りつぶした星マークの表示 Unicode: f5c0

疑似要素では、Unicode を使いますが、よく見ると「」「」の Unicode が同じです。
これは間違いではなく、 font-weightを指定して使い分けることができます。

FontAwesomeのサイト上では「Regular」「Solid」というスタイルで表記されており、それぞれ font-weight は「Regular = 400」「Solid = 900」を指定すると使い分けることができます。

iタグを使って書く場合のクラス名でも判別することができます。
クラス名の far とか fas は「far = Font Awesome Regular」「fas = Font Awesome Solid」という感じで略字になっています。

/* 例) 枠線だけの空白の星マーク */ 
.star:after{
 font-family: "Font Awesome 5 Free";
 font-weight: 400;
 content: "\f005";
}

上記のことを応用して、
レーティング0.0から5.0まで 0.5 刻みでレーティング表示する場合のサンプルを作成しました。

ポイントは 疑似要素の content にUnicode を続けて書けば、アイコンもその通りに表示されるということです。
そして、塗りつぶした星マークと空白の星マークを「:before」「:after」に分けてCSSで定義しています。

See the Pen
FontAwesomeを使った星レーティングの表示 by y.kawabata (@ykawabata)
on CodePen.

CSSの定義はこのようになります。

.star{
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  color: #fc6530;
}
.star:before{
  font-weight: 900;
}
.star:after{
  font-weight: 400;
}

.star[data-rate="0.0"]:before{ content: ""; }
.star[data-rate="0.5"]:before{ content: "\f5c0"; }
.star[data-rate="1.0"]:before{ content: "\f005"; }
.star[data-rate="1.5"]:before{ content: "\f005\f5c0"; }
.star[data-rate="2.0"]:before{ content: "\f005\f005"; }
.star[data-rate="2.5"]:before{ content: "\f005\f005\f5c0"; }
.star[data-rate="3.0"]:before{ content: "\f005\f005\f005"; }
.star[data-rate="3.5"]:before{ content: "\f005\f005\f005\f5c0"; }
.star[data-rate="4.0"]:before{ content: "\f005\f005\f005\f005"; }
.star[data-rate="4.5"]:before{ content: "\f005\f005\f005\f005\f5c0"; }
.star[data-rate="5.0"]:before{ content: "\f005\f005\f005\f005\f005"; }

.star[data-rate="0.0"]:after{ content: "\f005\f005\f005\f005\f005"; }
.star[data-rate="0.5"]:after{ content: "\f005\f005\f005\f005"; }
.star[data-rate="1.0"]:after{ content: "\f005\f005\f005\f005"; }
.star[data-rate="1.5"]:after{ content: "\f005\f005\f005"; }
.star[data-rate="2.0"]:after{ content: "\f005\f005\f005"; }
.star[data-rate="2.5"]:after{ content: "\f005\f005"; }
.star[data-rate="3.0"]:after{ content: "\f005\f005"; }
.star[data-rate="3.5"]:after{ content: "\f005"; }
.star[data-rate="4.0"]:after{ content: "\f005"; }
.star[data-rate="4.5"]:after{ content: ""; }
.star[data-rate="5.0"]:after{ content: ""; }

HTML側では下記のようにシンプルに書くことができます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />


星2.5の場合
<span class="star" data-rate="2.5"></span>

星4.0の場合
<span class="star" data-rate="4.0"></span>

いかがでしたでしょうか？
HTMLで何個もiタグを書くよりもスマートな感じになっていると思います。
レーティングの数値を変更するときも数字の部分を変えるだけで済みますので、メンテナンス性もアップします。

色やフォントサイズは好みで変更できます。

コーディングの際は、常に可読性とメンテナンス性を心がけて行うとみんながハッピーになれますので、参考になれば幸いです。