Tweet

Pocket

css（sass）でレーティング評価の「★」を実装する方法です。

実装イメージ

html

※レーティングは「5」が100%評価の場合です。

<div class="starRatings clearfix">
<div class="starRatingsBox">
<div class="starRatingsSprite"><span style="width:97.6%" class="starRatingsSpriteRating"></span></div>
</div>
<p class="starRatingsText">4.88</p>
</div>

sass

.starRatings {
	
	.starRatingsBox {
		float: left;
		unicode-bidi: bidi-override;
		font-size: 0;
		height: 12px;
		width: 60px;
		margin: 0;
		position: relative;
		padding: 0;
	}
	
	.starRatingsSprite {
		background: url(img/top/star.png) repeat-x;
		font-size: 0;
		height: 12px;
		line-height: 0;
		overflow: hidden;
		text-indent: -999em;
		width: 60px;
		margin: 0 auto;
	}

	.starRatingsSpriteRating {
		background: url(img/top/star.png) repeat-x;
		background-position: 0 100%;
		float: left;
		height: 12px;
		display: block;
	}
	
	.starRatingsText {
		margin: 0 0 0 70px;
		padding: 0;
		font-size(12);
		line-height: 1;
	}
}

「★」は画像で表現しており、下記のような画像を使用。