CSSでレーティング評価の星を実装する3つの方法

2016.04.07

star-rating01

CSSでレーティング評価の星を実装する3つの方法を紹介します。

1. CSSとSVGでレーティング評価の星を実装する方法

star-rating01

CSSとSVGを使ってレーティング評価の星を実装する方法です。星はSVGを使用した画像ファイルなので、自由なデザインに変更することができます。ラジオボタンでレーティングを選択できるようになっています。

デモ(CodePen)

301 Moved Permanently
codepen.io

HTMLを用意します。

<span class="star-rating">
  <input type="radio" name="rating" value="1"><i></i>
  <input type="radio" name="rating" value="2"><i></i>
  <input type="radio" name="rating" value="3"><i></i>
  <input type="radio" name="rating" value="4"><i></i>
  <input type="radio" name="rating" value="5"><i></i>
</span>
<strong class="choice">Choose a rating</strong>

CSSを用意します。

.star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 250px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}
.choice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 20px;
  display: block;
}
*,
::after,
::before {
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
body::before {
  height: 100%;
  content: '';
  width: 0;
  background: red;
  vertical-align: middle;
  display: inline-block;
}

2. パーセント指定で星のレーティング評価を表示する方法

star-rating03

パーセント単位で、星のレーティングを細かく指定することができます。84%や52%など、細かく星の表示をコントロールすることができます。

デモ(CodePen)

301 Moved Permanently
codepen.io

HTMLを用意します。下の52%の方は、CSSスプライトを使用した方法です。

<h1>Percentage based star ratings</h1>
  
<h2><em>Method 1)</em> Pure CSS/Unicode (84% rating)</h2>
<div class="star-ratings-css">
  <div class="star-ratings-css-top" style="width: 84%"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
  <div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
</div>
  
<br/><br/>
  
<h2><em>Method 2)</em> Using a Sprite (52% rating)</h2>
<div class="star-ratings-sprite"><span style="width:52%" class="star-ratings-sprite-rating"></span></div>

CSSを用意します。CSSスプライトを使用しないならば、「.star-ratings-sprite」関連の部分は不要です。

@import url(http://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://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;
}
body {
  margin: 50px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  background: #f2fbff;
}
em {
  font-style: italic;
}
h1 {
  font-size: 24px;
  margin-bottom: 25px;
  font-weight: bold;
  text-transform: uppercase;
}
h2 {
  font-size: 16px;
  margin-bottom: 15px;
}

3. 「jQuery Bar Rating」を使って、星のレーティングを簡単に実装する方法

最後は、「jQuery Bar Rating」を使って、セレクトフォームを簡単に星のレーティング表示に変更する方法を紹介します。

star-rating05

デモページを用意しました。

ソースはGitHubからダウンロードできます。右の方にある「Download ZIP」のボタンです。

HTMLを用意します。

<select id="example">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

CSSを読み込みます。ここでは、星アイコンを表示するWebフォント、font-awesome.min.cssはCDNから読み込んでいます。「css/fontawesome-stars.css」はダウンロードしたフォルダの「dist > themes」に入っています。

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href="css/fontawesome-stars.css"/ rel="stylesheet">

jQueryとjquery.barrating.min.jsを読み込みます。jquery.barrating.min.jsはダウンロードしたフォルダの「dist」に入っています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/jquery.barrating.min.js"></script>

CSSで星のサイズを調整します。

.br-theme-fontawesome-stars .br-widget a {
  font-size: 5rem;
}

JavaScriptを実行します。

<script>
$(function() {
  $('#example').barrating({
    theme: 'fontawesome-stars'
  });
});
</script>