星5つ評価機能をWebページに実装することは、ユーザーに製品やサービスの評価を求めるために非常に便利です。以下は、この機能を実現するための手順です。
HTML要素の作成
最初に、5つの星のアイコンを表示するためのHTML要素を作成します。これには、例えばdiv要素やspan要素を使用することが一般的です。
<div class="rating"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> </div>
CSSスタイルの適用
次に、HTML要素に適切なスタイルを適用して、星のアイコンが適切に表示されるようにします。CSSを使用して、アイコンの色やサイズ、表示方法を指定します。
.star {
font-size: 24px;
color: #ffd700; /* 星の色 */
cursor: pointer; /* マウスカーソルをポインターに変更 */
}
.star:hover,
.star.active {
color: #ffcc00; /* マウスを重ねたり、クリックした星の色 */
}
JavaScriptのイベント処理
JavaScriptを使用して、ユーザーが星をクリックしたときの処理を実装します。クリックされた星とそれより左のすべての星をアクティブにし、それより右のすべての星を非アクティブにします。
const stars = document.querySelectorAll('.star');
stars.forEach((star, index) => {
star.addEventListener('click', () => {
stars.forEach((s, i) => {
if (i <= index) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
});
});
評価の送信
ユーザーが評価を選択した後、その評価をサーバーに送信して保存します。
Ajaxを使用して非同期的に送信し、ユーザーに画面遷移を待たせないようにします。
一般的には、以下のような方法が使われます。
フィードバックの表示
ユーザーが評価を選択した後、選択された評価をユーザーにフィードバックとして表示します。これにより、ユーザーは評価が正常に送信されたことを確認できます。
一般的には、以下のような方法が使われます。
よくある質問（FAQ）
Q. JavaScriptでページ内の星評価（☆/★）UIを実装するには？
A. ラジオボタンとlabelをCSSで星形に見せる純CSS実装か、JavaScript+SVGで動的に評価を処理する方法があります。CSSのみのアプローチはアクセシビリティ対応が比較的容易です。
Q. 星評価をサーバーに送信するには？
A. hiddenのinput要素に選択された評価値を設定し、フォーム送信に含めます。またはAjaxで評価値をPOSTします。評価後は平均評価の更新もUIに反映させてください。
Q. 星評価のhover時のプレビューはどう実装しますか？
A. CSSのgeneral sibling combinator（~）とhoverを組み合わせることで純CSSでも実現できます。JavaScriptではmouseoverイベントで仮評価を表示し、mouseoutでリセットします。
まとめ
これで、Webページ上で星5つ評価機能を実装する準備が整いました。この機能を使用することで、製品やサービスの評価を簡単に収集し、改善に役立てることができます。