レーティングの星をCSSで実現する簡単な方法

PC, WEBCSS

買った商品や行った場所などを評価する時に視覚的に簡単に伝えるといえばどのサイトでもおなじみの★の数ですよね。
いろいろ彷徨った結果一番いい感じで表示ができた方法を紹介します。

ページコンテンツ

実装方法

CSS

画像の読み込み先｢http://shiteki.com/img/star.png｣は別で設定をお願いします。


@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
.star-ratings-css {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 25px;
  height: 25px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  padding: 0;
  text-shadow: 0px 1px 0 #a2a2a2;
}
.star-ratings-css-top {
  color: #e7711b;
  padding: 0;
  position: absolute;
  z-index: 1;
  display: block;
  top: 0;
  left: 0;
  overflow: hidden;
}
.star-ratings-css-bottom {
  padding: 0;
  display: block;
  z-index: 0;
}
.star-ratings-sprite {
  background: url("https://shiteki.com/img/star.png") repeat-x;
  font-size: 0;
  height: 21px;
  line-height: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 110px;
  margin: 0 auto;
}
.star-ratings-sprite-rating {
  background: url("https://shiteki.com/img/star.png") repeat-x;
  background-position: 0 100%;
  float: left;
  height: 21px;
  display: block;
}

html

★3つ＝60%
<div class=”star-ratings-sprite”><span style=”width:60%” class=”star-ratings-sprite-rating”></span></div>

実際の表示

項目 評価
星1つ＝20%
星1.5つ＝20%
星2つ＝20%
星2.5つ＝20%
星3つ＝20%
星3.5つ＝20%
星4つ＝20%
星4.5つ＝20%
星5つ＝20%
星2.2つ＝20%
星3.7つ＝20%

PC, WEBCSS