パーツ番号 04-07-09 ・ CSSのみ

星型評価チェック(レーティング風・静止)

星の選択状態を固定表示したレーティング風チェック見本。商品レビューや満足度の表示欄に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-09-row">
          <span class="d04-07-09-star on">&#9733;</span>
          <span class="d04-07-09-star on">&#9733;</span>
          <span class="d04-07-09-star on">&#9733;</span>
          <span class="d04-07-09-star">&#9733;</span>
          <span class="d04-07-09-star">&#9733;</span>
        </div>

CSS

.d04-07-09-row{display:flex;gap:6px}
        .d04-07-09-star{font-size:30px;color:#e2e8f0;line-height:1}
        .d04-07-09-star.on{color:#fbbf24}

クラス名 .d04-07-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。