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を実行します。

スポンサーリンク

人気の記事

コメントを投稿する

  • Posted on 2016.04.07
  • Views 3,466