CSSだけレビュー評価コンポーネントFive-Star作成する方法

3 min read

仕様

  • JavaScript を使用せずに動作すること
  • 評価範囲は 0〜5 とし、それを表現できること
  • 評価値を色で塗りつぶして表現すること
  • クリックしても何も動作しない、見た目だけのコンポーネントであること

実装

HTML

★ をラップする形で実装する。

<!-- 星は Font Awesome を利用しているが「★」でも良い -->
<div class="five-star" style="--rating: 5;">
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
  <i class="fas fa-star fa-fw fa-5x"></i>
</div>

CSS Custom Properties(--rating)で評価値(星の塗りつぶしの割合)を指定する。

CSS

CSS は以下のように実装する。

.five-star {
  // 変数
  --star-color: #fff;
  --star-fill: #ffd43b;
  --percent: calc(var(--rating) / 5 * 100%);

  // スタイル
  display: flex;
  background: linear-gradient(90deg, var(--star-fill) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

割合の計算

HTML から渡された評価値を元に、--percentを計算する。

--percent: calc(var(--rating) / 5 * 100%);

星は 5 つあるため、評価値を 5 で割ってパーセントに変換する。星の最大数に合わせて、この値を調整すれば良い。

星をマスクする

まず、background: linear-gradient()を利用して全体に塗りつぶしを実装する。塗りつぶしを行うと以下のようになる。

`linear-gradient`で塗りつぶした様子

わかりやすく黒色を背景にしているが、この部分が見えない部分になる。

次に、-webkit-background-clip: text;を利用して、★ の部分だけを塗りつぶすようにする。

`-webkit-background-clip: text`で塗りつぶしたものを切り抜いた様子

最後に、-webkit-text-fill-color: transparent;を利用して、★ の部分を透明にする。

デモ

このページをシェアする

関連タグ

関連記事

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS設計] ITCSSとは

TL;DR / CSS の問題 / ITCSS / 参考

[CSS設計] ITCSSをプロダクトに利用した所感

CSS の問題点 / CSS 設計 / ITCSS とは / ITCSS のメリット / おわり / 参考

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連