CSSでレーティング評価の星を実装する3つの方法

star-rating01

CSSでレーティング評価の星を実装する3つの方法を紹介します。

1. CSSとSVGでレーティング評価の星を実装する方法

star-rating01

CSSとSVGを使ってレーティング評価の星を実装する方法です。星はSVGを使用した画像ファイルなので、自由なデザインに変更することができます。ラジオボタンでレーティングを選択できるようになっています。

デモ(CodePen)

HTMLを用意します。

CSSを用意します。

2. パーセント指定で星のレーティング評価を表示する方法

star-rating03

パーセント単位で、星のレーティングを細かく指定することができます。84%や52%など、細かく星の表示をコントロールすることができます。

デモ(CodePen)

HTMLを用意します。下の52%の方は、CSSスプライトを使用した方法です。

CSSを用意します。CSSスプライトを使用しないならば、「.star-ratings-sprite」関連の部分は不要です。

3. 「jQuery Bar Rating」を使って、星のレーティングを簡単に実装する方法

最後は、「jQuery Bar Rating」を使って、セレクトフォームを簡単に星のレーティング表示に変更する方法を紹介します。

star-rating05

デモページを用意しました。

ソースはGitHubからダウンロードできます。右の方にある「Download ZIP」のボタンです。

HTMLを用意します。

CSSを読み込みます。ここでは、星アイコンを表示するWebフォント、font-awesome.min.cssはCDNから読み込んでいます。「css/fontawesome-stars.css」はダウンロードしたフォルダの「dist > themes」に入っています。

jQueryとjquery.barrating.min.jsを読み込みます。jquery.barrating.min.jsはダウンロードしたフォルダの「dist」に入っています。

CSSで星のサイズを調整します。

JavaScriptを実行します。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 4,084