CSS評価スター（小数点の評価）

CSS評価スター（小数点の評価）: 用途

満タンか空かだけの星では、4.1と4.9の違いが伝わりません。このジェネレーターは、テキストで切り抜いたグラデーションと、CSS変数に入れた評価で、評価の正確な割合だけ塗りつぶす純粋なCSSの星を作ります。

星の数、サイズ、色、横に表示する数値、レビューの総数を調整できます。非表示のラジオボタンで作った投票できるクリック版もあり、マウス、タッチ、キーボードで操作でき、JavaScriptなしでフォームに評価を送れます。どちらの版にもスクリーンリーダー用のテキストが付いています。

使い方

1. 評価と星の数を入力します。
2. サイズと色を調整します。
3. コードをコピーします。

使うタイミング

• 商品の平均評価。
• レビューフォーム。
• ランディングページのレビューの要約。

よくある質問

星はどうやって小数を表しますか？

星はテキスト（★）で、はっきり切り替わる位置のあるグラデーションで塗られています。評価の割合までは塗りつぶしの色、その先は空の色です。5段階で4.3なら、グラデーションは幅の86%を塗り、5つ目の星は一部だけが色付きになります。

アクセシブルですか？

はい。要素には role=img と、「評価 4.3 / 5」のような aria-label があり、スクリーンリーダーは記号の代わりにこれを読み上げます。

クリック版はどう動きますか？

星ごとに1つずつ、非表示のラジオボタン（radio）を使います。マウス、タッチ、キーボード（矢印キー）で操作でき、JavaScriptなしで評価をフォームと一緒に送信します。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール