CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで簡単な星評価（スターレーティング）を作成する方法

CSSを使えば、Font Awesomeのアイコンと組み合わせることで、シンプルで見栄えの良い星評価（スターレーティング）を簡単に作成できます。本記事では、基本的な星評価の外観を実装する方法を、サンプルコードとともに解説します。

実装のポイント

星評価を作成する際のポイントは以下のとおりです。

  • Font Awesomeの読み込み： CDN経由でスタイルシートを読み込むことで、星アイコン（fa-star）を手軽に利用できます。
  • .faクラス： アイコンのサイズ（font-size）と基本色（color）を指定します。
  • .ratedクラス： 評価済みの星に適用するクラスで、色を変更したり枠線を追加したりして、未評価の星と視覚的に区別します。

コード例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 30px;
   }
   .fa {
      font-size: 30px;
      color: grey;
   }
   .rated {
      color: rgb(255, 0, 0);
      border: 2px solid yellow;
   }
</style>
</head>
<body>
<h1>Star Rating Example</h1>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</body>
</html>

コードの解説

このコードでは、5つの星アイコンを要素で並べ、そのうち3つに「rated」クラスを付与しています。 ratedクラスが適用された星は赤色（rgb(255, 0, 0)）で表示され、黄色の枠線が付くため、評価済みであることがひと目でわかります。一方、クラスが付いていない星はグレーのまま表示されます。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

CSSで簡単な星評価（スターレーティング）を作成する方法

応用のヒント

さらに実用的な星評価にしたい場合は、以下のようなカスタマイズがおすすめです。

  • hover疑似クラスを使えば、マウスオーバー時に星が変化するインタラクティブな演出を追加できます。
  • JavaScriptと組み合わせることで、クリックした星の数に応じて評価を保存・送信する機能を実装できます。
  • 色をオレンジやゴールドに変更すると、より一般的なレビュー画面らしい見た目になります。

このように、CSSとFont Awesomeを組み合わせるだけで、最小限のコードで星評価のUIを実現できます。ぜひ自分のプロジェクトに合わせてカスタマイズしてみてください。

  1. CSSで空の円を作成する方法をわかりやすく解説

    CSSで空の円（丸いドットや中空の円）を作成するには、border-radiusプロパティを活用します。正方形の要素に対して border-radius: 50% を指定することで、完全な円形に変形できます。さらに、背景色を設定すれば塗りつぶしの円に、背景を透明にして border を使えば中空の円（リング状）も簡単に表現できます。以下に、複数の円形ドットを並べて表示する具体的なコード例を示します。サンプルコード<!DOCTYPE html> <html> <head> <meta name="viewport" content=&

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>