スター評価UI
5段階の星でレビュー評価を入力できるUIです。仕組みはシンプルで、5つのラジオボタンとラベルを並べ、 flex-direction:row-reverse で見た目を逆順にしているのがポイントです。
解説
5段階の星でレビュー評価を入力できるUIです。仕組みはシンプルで、5つのラジオボタンとラベルを並べ、flex-direction:row-reverse で見た目を逆順にしているのがポイントです。これにより、CSSの兄弟セレクタ label:hover と続く兄弟へのスタイルだけで「ホバーした星とその左側すべてを点灯」させられ、JavaScriptなしで自然な点灯挙動を実現しています。選択中は input:checked から後ろの星に色を当てています。
使う場面
- 商品レビューや満足度アンケートの入力欄
- フォーム内の簡易フィードバック
- 送信して点数を保存する評価機能の見た目部分
星の大きさは font-size、点灯色はオレンジの #f59e0b、消灯色は #d1d5db を変えるだけで調整できます。星はインラインSVGで描いているので外部フォントに依存しません。注意点として、表示専用ではなく入力フォームなので、各 input に分かりやすい name と値を持たせ、ラベルを for で正しく結びつけてください。読み上げ環境のために、各星に何点かを示す説明テキストを足すとさらに親切です。
よくある質問
星の色や大きさはどこで変えますか？
大きさはlabelのfont-size、点灯色は#f59e0b、消灯色は#d1d5db を書き換えます。インラインSVGで描いているため、外部のアイコンフォントを読み込まなくても表示できます。
選んだ点数を取得するには？
チェックされたラジオボタンのvalueを読めば点数が分かります。同じname属性でグループ化されているので、フォーム送信やJavaScriptのchecked判定でその値を取得して保存してください。