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

         

CSS

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

2020年03月01日 16:35 2020年03月02日

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

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

世間では新型肺炎ウィルスのニュースで大変なことになっていますが、
僕は先週末、知り合いに麻雀に誘われ、終わったのが深夜3時頃だったのですが、店を出てから家の鍵を紛失していることに気づき、麻雀店にもなくて万事休す!という事態に陥りましたがマンションの24時間サポートのおかげでなんとか部屋に入ることができました。

ちゃんと家賃を払っているので無料で開けてもらえて感謝。
※鍵は翌日、夕食を食べた鉄板焼のお店で無事見つかりました。



 

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

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

 

Font Awesomeとは?

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

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

 

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

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

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

 

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

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



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

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

 

今回は、レーティング表示で使用したいため下記の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」という感じで略字になっています。

 

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

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

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

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

 

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

 

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

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

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

関連記事

この記事を書いた人

アバター

K

福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中!