こんにちは、社員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-aweso
![Font Awesomeを使った星マークのレーティング表示のスマートな方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/89995e2f86443e54d950600dbf01b50effbd3e13/height=288;version=1;width=512/https%3A%2F%2Fblog.universe-web.jp%2Fwp-content%2Fuploads%2F2020%2F03%2Ffontawesome-rating.jpg)