インタラクティブ星レーティング
星をクリックして5段階の評価を入力できる、レビューフォーム向けのコンポーネントです。星は button 要素として並び、それぞれに data-v で1から5の値を持たせています。マウスを乗せると mouseover で、その星以下すべてに star-rating__star--hover を付けてプレビュー表示し…
解説
星をクリックして5段階の評価を入力できる、レビューフォーム向けのコンポーネントです。星は button 要素として並び、それぞれに data-v で1から5の値を持たせています。マウスを乗せると mouseover で、その星以下すべてに star-rating__star--hover を付けてプレビュー表示し、mouseout で解除します。クリックすると選択値を確定し、star-rating__star--active で塗りを固定する、という二段構えの状態管理が要点です。星の色は CSS の #f59e0b（アクティブ）と #ddd（未選択）で切り替えています。
使う場面
- 商品レビューや満足度アンケートの入力欄
- 飲食店や宿の評価フォーム
- 社内ツールでの簡易フィードバック収集
星の数を増やすには HTML のボタンを足して data-v を連番にするだけです。色はアクティブ時の値を変えれば、赤やピンクなどブランドに合わせられます。アクセシビリティを高めるなら、各ボタンに aria-label で「星3つ」などの説明を付け、キーボードでも選べるよう左右キー操作を補うとより親切です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
星の数を5以外にできますか？
できます。HTMLのbutton要素を増減し、data-v属性を1から順に振り直すだけで対応します。10段階評価にしたい場合は星を10個並べ、表示テキストの分母も合わせて変更します。
選んだ値をフォーム送信に使うには？
選択値を保持しているselected変数を、隠しinputのvalueに代入するか、送信時にそのまま読み取って使います。サーバーに送る際はその数値をPOSTすれば、通常のフォーム項目と同じように扱えます。