さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【css】レーティング評価(★)の作り方

Pocket
LINEで送る

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;
	}
}

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

カテゴリー:HP制作, css

コメントを残す

コメント内容