【CSS・SCSS】レビューや評価の星のレーティングを作成する方法を実例で解説｜自由に調整可能な5段階評価のスター（0.1や0.5刻みも可能,10段階, 50段階）

sass-scss-prograshi（プロぐらし）-kv CSS・SCSS
2023/6/26
記事内に広告が含まれていることがあります。

口コミやレビューなどでよく目にする以下のような星による評価を作成する方法について解説しています。

なお、5段階ではなく、0.5刻みの10段階や、0.1刻みの50段階評価への変更も簡単にできます。

解説ではSCSSを使っていますが、コンパイル後のCSSのフルコードも記載してあります。（スタイル設定の概念は、SCSSもCSSも同じです）

▼完成例


考え方

使う概念

作り方はいくつかあます。例えば、画像を使ったり、svgを使ったり、divやspanなどのタグで星を欲しい数だけ用意しておきcssで色を変えるなどです。

ここでは、htmlコードを超シンプルにして、spanタグと擬似要素の::before, ::afterで作成する方法について解説しています。

星の数の指定はカスタム属性（data-）で視覚的に調整できます。


擬似要素使ったレーティング

作り方は以下のように、「::before」で黒い星を作成します。そこにレーティングの数に合わせて星を黄色く塗りつぶした要素を「::after」で重ねます。

作成のポイントは以下の4点です。

作成のポイント
  1. 裏地のグレーの星を::beforeで作成する。
  2. 黄色のスターを::afterで作成する。（黄色く塗りつぶした星を５つ用意。）
  3. widthで表示する長さを調整する。（はみ出した部分はoverflow: hidden;で非表示にする）
  4. 黄色い星をグレーの星の上に重ねる。


完成後のコード

先に完成後のコードを記載しておきます。詳細は以降に記載しています。

HTML

<span class="star-rating" data-rate="3"></span>

HTMLのコードは1行のみです（シンプルです）。

「data-rate」というデータ属性を用意し、その値の数値に合わせて塗りつぶした星の数が変化します。


SCSS（CSS）

CSSスタイルは以下のようになります。ここではSCSSで記述しています。

$star-width: 36px; //星のサイズ

.star{
  &-rating{
    position: relative;
    font-size: $star-width; //星の大きさ。変数で指定
    &::before, &::after{
      content: "★★★★★";
      color: #e1e1e1;   //グレー
      position: absolute;
      top: 0;
      left: 0;
    }
    &::after{
      color: #ffb448;  //黄色
      overflow: hidden;
    }
  }
}

//レーティングの間隔。1~5まで0.5刻み。
@for $i from 0 through 10 {
  .star-rating[data-rate="#{$i * 0.5}"]::after{
    width: $i * 0.5 * $star-width;
  }
}

使うコードは以上です。

上記はレーティングの感覚を0.5刻みにしています。「0.5」の部分とループの回数を書き変えれば「0.1」刻みや「1」刻みなどに簡単に変更することができます。

注意点

上記の場合、用意しているCSSスタイルは、「data-rate」が1~5までの範囲で0.5刻みです。このため、それ以外の値指定すると、width適用なしとなり、星５個になります。

もっと細かくしたい場合は「0.1」刻みなどに変更する必要があります。


ブラウザの表示

ブラウザの表示は以下のようになります。

星３の場合

「data-rate」の値が「3」のときは星３つになります。

<span class="star-rating" data-rate="3"></span>


星1.5の場合

「data-rate」の値が「1.5」のときは星1.5個になります。

<span class="star-rating" data-rate="1.5"></span>


0.1刻みに変更する方法（50段階）

１～５までの範囲で0.1刻みで設定できるようにするには、@forループを以下のように変更します。（※コンパイル後のCSSが大量になります）

//レーティングの間隔。0.1刻み
@for $i from 0 through 50 {
  .star-rating[data-rate="#{$i * 0.1}"]::after{
    width: $i * 0.1 * $star-width;
  }
}


SCSSの各コードの処理内容

SCSSで使用している主な処理は次の４つです。

  1. 変数の作成。
  2. 擬似要素の設定。
  3. カスタム属性の作成。
  4. forループによるcss作成。


変数の作成

SCSSでは、$変数名で変数を作成することができます。

ここでは「$star-width」という変数を作成して、36pxを代入しています。

$star-width: 36px; //星のサイズ

この「$star-width」は次の２つで使用しています。

  1. グレーと黄色の星のサイズ
  2. 黄色の星のwidth指定

(1) font-size: $star-width;
(2) width: $i * 0.5 * $star-width;

point

変数を使うことで、星のサイズを変更したいときは、変数の値を変更するだけでよくなります。


擬似要素の設定

該当のコード

クラス名「star-rating」に対して、疑似要素の「::before」と「::after」を設定します。

.star{
  &-rating{
    position: relative;
    font-size: $star-width; //星の大きさ。変数で指定
    &::before, &::after{
      content: "★★★★★";
      color: #e1e1e1;   //グレー
      position: absolute;
      top: 0;
      left: 0;
    }
    &::after{
      color: #ffb448;  //黄色
      overflow: hidden;
    }
  }
}

親要素のspanタグにposition: relative;を設定し、子要素の::beforeと::afterにposition: absolute;を設定することで親要素（spanタグ）の位置を起点として、擬似要素（afterとbefore）の位置を指定しています。

beforeとafterで共通の処理

擬似要素「before」と「after」の両方で★を５つ表示するため、content: "★★★★★";とています。

位置は親要素を基準として、左上（top:0; left:0;）を指定します。afterが後からレンダリングされるので、beforeの上に乗ります。

・sassの基本的な使い方



afterの設定

afterは色を黄色にします。

また、指定した長さをはみ出した部分はoverflow: hidden;で非表示にする。

・擬似要素とは？擬似要素の使い方


カスタム属性の作成

該当のコード

data-という記述で好きな属性を設定できる「カスタム属性」を使用して、指定した数値に対して「::after」の幅を調整できるようにします。

  .star-rating[data-rate="数値"]::after{
    width: 数値px;

これが、htmlのクラス属性.star-rating::afterを持ち、data-rate=”数値”がある要素に適用されます。


属性を指定してスタイルを適用する方法

CSSを適用する属性を指定するときは以下のように記述します。

セレクタ[属性名]

これで、指定したセレクタでかつ指定した属性がついている要素にスタイルが適用されます。

属性と値を指定してスタイルを適用する方法

属性名だけでなく、属性の値も指定する場合は以下のようにします。

セレクタ[属性名="値"]

これで、指定したセレクタでかつ指定した属性と値がついている要素にスタイルが適用されます。


・カスタム属性の構造と作り方解説


forループによるcss作成

該当のコード

カスタム属性を1~5まで0.5刻みで作成する作業を簡略化するため、forループを使います。

//レーティングの間隔。1~5まで0.5刻み。
@for $i from 0 through 10 {
  .star-rating[data-rate="#{$i * 0.5}"]::after{
    width: $i * 0.5 * $star-width;
  }
}
point

#{ }を使うことで変数を使った処理を記述することができます。


forループの使い方

@for $変数名 from 初期値 through 終了値 {
  処理
}
注意点

終了値をthroughで指定した場合は、その値も含みます。（toで指定した場合は含まない）


forのコンパイル結果

上記の、0.5刻みのforループをコンパイルすると、CSSは以下のようになります。

.star-rating[data-rate="0"]::after {
  width: 0px;
}

.star-rating[data-rate="0.5"]::after {
  width: 18px;
}

.star-rating[data-rate="1"]::after {
  width: 36px;
}

.star-rating[data-rate="1.5"]::after {
  width: 54px;
}

.star-rating[data-rate="2"]::after {
  width: 72px;
}

.star-rating[data-rate="2.5"]::after {
  width: 90px;
}

.star-rating[data-rate="3"]::after {
  width: 108px;
}

.star-rating[data-rate="3.5"]::after {
  width: 126px;
}

.star-rating[data-rate="4"]::after {
  width: 144px;
}

.star-rating[data-rate="4.5"]::after {
  width: 162px;
}

.star-rating[data-rate="5"]::after {
  width: 180px;
}

SCSS（SACC）のforループはとても便利なのでオススメです。

・sass forループの使い方事例


コンパイル後のCSSフルコード

SCSSをコンパイルした後のCSSのコードは以下のようになります。CSSをお使いの方は下記をコピペしてご使用ください。

SCSSの記述（コンパイル前）

$star-width: 36px; //星のサイズ

.star{
  &-rating{
    position: relative;
    font-size: $star-width; //星の大きさ。変数で指定
    &::before, &::after{
      content: "★★★★★";
      color: #e1e1e1;   //グレー
      position: absolute;
      top: 0;
      left: 0;
    }
    &::after{
      color: #ffb448;  //黄色
      overflow: hidden;
    }
  }
}

//レーティングの間隔。1~5まで0.5刻み。
@for $i from 0 through 10 {
  .star-rating[data-rate="#{$i * 0.5}"]::after{
    width: $i * 0.5 * $star-width;
  }
}


CSS（コンパイル後）

.star-rating {
  position: relative;
  font-size: 36px;
}
.star-rating::before, .star-rating::after {
  content: "★★★★★";
  color: #e1e1e1;
  position: absolute;
  top: 0;
  left: 0;
}
.star-rating::after {
  color: #ffb448;
  overflow: hidden;
}

.star-rating[data-rate="0"]::after {
  width: 0px;
}

.star-rating[data-rate="0.5"]::after {
  width: 18px;
}

.star-rating[data-rate="1"]::after {
  width: 36px;
}

.star-rating[data-rate="1.5"]::after {
  width: 54px;
}

.star-rating[data-rate="2"]::after {
  width: 72px;
}

.star-rating[data-rate="2.5"]::after {
  width: 90px;
}

.star-rating[data-rate="3"]::after {
  width: 108px;
}

.star-rating[data-rate="3.5"]::after {
  width: 126px;
}

.star-rating[data-rate="4"]::after {
  width: 144px;
}

.star-rating[data-rate="4.5"]::after {
  width: 162px;
}

.star-rating[data-rate="5"]::after {
  width: 180px;
}
タイトルとURLをコピーしました