インタラクティブ星評価
この部品は、星をクリックして点数を選べるインタラクティブな星評価です。星は svg の星形で描かれた5つのボタンで、JavaScript が click で点数を確定し、 mouseover と mouseout でカーソル位置までの星をプレビュー点灯させます。
解説
この部品は、星をクリックして点数を選べるインタラクティブな星評価です。星は svg の星形で描かれた5つのボタンで、JavaScript が click で点数を確定し、mouseover と mouseout でカーソル位置までの星をプレビュー点灯させます。点灯した星には rating__star--on クラスが付いて色が変わり、選んだ点数に応じて「良い」「最高」などのラベルも切り替わります。CSS の :hover では transform:scale でわずかに拡大し、操作感を高めています。
使う場面
- 商品レビューや感想フォームで満足度を入力させるとき
- 記事やコンテンツへのフィードバックを集めるとき
- アンケートで5段階の評価を直感的に答えてもらうとき
色は CSS の .rating__star--on と :hover の数値で、点数ごとの言葉は labels 配列で変更できます。星の数を増減したい場合はボタンの個数と data-v 値を合わせます。注意点として、ボタン要素を使っているためキーボード操作が可能ですが、左右キーでの選択や読み上げを完全に対応させるには role や aria の補強を加えるとより親切です。
よくある質問
星の数を5つ以外に変えられますか
変えられます。HTML の星ボタンの数を増減し、それぞれの data-v 属性を 1 から順に振り直してください。あわせて、点数ごとの言葉を入れている labels 配列の要素数も星の数に合わせて調整します。
星の色を変えるにはどこを編集しますか
CSS の rating__star--on と hover に指定されている色が点灯時の色です。初期の薄い色は rating__star の color で決まります。これらを好みの色に変えれば、未選択と選択済みの両方の見た目を調整できます。