CSS3でスターレーティング

作成日 2020.12.15
CSS
CSS3

CSSだけで以下のようなスターレーティング（星評価）を実装する簡単なサンプルコードを記述してます。

1. 環境
2. スターレーティング
3. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

スターレーティング

スターレーティング（星評価）の★マークは:before疑似要素の「content」プロパティで作成しているので、簡単にマークを変えることができます。

/* 動作の基本となるcss */

.rating {
  display: inline-flex;
  flex-direction: row-reverse;
}

.hidden--visually {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* ここでデザインの変更 */

.rating__label {
  cursor: pointer;
  color: gray;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.rating__icon::before {
  content: "★";
  font-size: 4rem;
  padding: 1rem;
}

.rating__input:hover ~ .rating__label {
  color: lightgray;
}

.rating__input:checked ~ .rating__label {
  color: #ffbb00;
}

サンプルコード

以下は実際に、スターレーティングを実装したサンプルコードとなります。

<section>

  <style>
    /* 動作の基本となるcss */

    .rating {
      display: inline-flex;
      flex-direction: row-reverse;
    }

    .hidden--visually {
        border: 0;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    /* ここでデザインの変更 */

    .rating__label {
      cursor: pointer;
      color: gray;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
    }

    .rating__icon::before {
      content: "★";
      font-size: 4rem;
      padding: 1rem;
    }

    .rating__input:hover ~ .rating__label {
      color: lightgray;
    }

    .rating__input:checked ~ .rating__label {
      color: #ffbb00;
    }
  </style>

  <div class="rating">
    <input class="rating__input hidden--visually" type="radio" id="5-star" name="rating" value="5" required />
    <label class="rating__label" for="5-star" title="星5つ"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">星5つ</span></label>
    <input class="rating__input hidden--visually" type="radio" id="4-star" name="rating" value="4" />
    <label class="rating__label" for="4-star" title="星4つ"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">星4つ</span></label>
    <input class="rating__input hidden--visually" type="radio" id="3-star" name="rating" value="3" />
    <label class="rating__label" for="3-star" title="星3つ"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">星3つ/span></label>
    <input class="rating__input hidden--visually" type="radio" id="2-star" name="rating" value="2" />
    <label class="rating__label" for="2-star" title="星2つ"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">星2つ</span></label>
    <input class="rating__input hidden--visually" type="radio" id="1-star" name="rating" value="1" />
    <label class="rating__label" for="1-star" title="星1つ"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">星1つ</span></label>
  </div>

</section>

ブラウザ上で表示した結果