評価を星で表示する

JavaScript HTML/CSS

評価によって星の表示を変化させる方法

下の図のように評価の数字によって表示させる星を変えるとする。

 

HTMLの記述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style1.css">
<title>html_css_question1</title>
</head>
<body>

<h1>評価を星で表示する</h1>
<p>10%</p>
<div class="star-ratings-sprite"><span style="width:10%" class="star-ratings-sprite-rating"></span></div>
<p>50%</p>
<div class="star-ratings-sprite"><span style="width:50%" class="star-ratings-sprite-rating"></span></div>
<p>100%</p>
<div class="star-ratings-sprite"><span style="width:100%" class="star-ratings-sprite-rating"></span></div>
</body>
</html>

 

 CSSの記述

body {
margin: 50px;
text-align: center;
font-family: 'Open Sans', sans-serif;
background: #f2fbff;
}
h1 {
font-size: 24px;
margin-bottom: 25px;
font-weight: bold;
text-transform: uppercase;
}


.star-ratings-sprite {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.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://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
background-position: 0 100%;
float: left;
height: 21px;
display: block;
}

 

このように、star-ratings-sprite クラス(灰色の星)と、star-ratings-sprite-ratings クラス(色の付いている星)を重ねて表示させ、色のついている星のwidthを調節することによって、星の表示を変化させることができる。

 

 

評価によって表示を変化させるなら、star-ratings-sprite-ratingクラスのwidthの%の部分を、評価を取得するように書き換えればよい。

<div class="star-ratings-sprite"><span style="width:{ここに評価を取得するよう書く}%" class="star-ratings-sprite-rating"></sapan></div>

 

参考サイト： 

https://codepen.io/Bluetidepro/pen/GkpEa