【css】レーティング評価(★)の作り方
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; } }
「★」は画像で表現しており、下記のような画像を使用。
コメントを残す