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

CSSを使ってユーザー評価スコアカードを作成する方法

CSSとFont Awesomeのアイコンフォントを組み合わせれば、レビューサイトやECサイトでおなじみの「ユーザー評価」スコアカードを簡単に作成できます。平均評価を示す星アイコンと、各星の評価件数を視覚化したプログレスバー（進捗バー）を並べることで、訪問者にとって直感的に分かりやすい評価パネルを実現できます。

実装例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
    * {
        box-sizing: border-box;
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 30px;
        max-width: 800px;
        padding: 20px;
    }
    .rateHeader {
        font-size: 25px;
        margin-right: 25px;
    }
    .fa {
        font-size: 25px;
        color: grey;
    }
    .rated {
        color: rgb(255, 0, 0);
        border: 2px solid yellow;
    }
    .data {
        float: left;
        width: 15%;
        margin-top: 10px;
        font-weight: bold;
    }
    .progressBar {
        margin-top: 10px;
        float: left;
        width: 70%;
    }
    .right {
        text-align: right;
    }
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    .progressContainer {
        width: 100%;
        background-color: #f1f1f1;
        text-align: center;
        color: white;
        border-radius: 10px;
    }
    .bar-1, .bar-2, .bar-3, .bar-4, .bar-5 {
        border-radius: 10px;
    }
    .bar-5 {
        width: 70%;
        height: 18px;
        background-color: rgb(76, 175, 162);
    }
    .bar-4 {
        width: 50%;
        height: 18px;
        background-color: rgb(243, 222, 33);
    }
    .bar-3 {
        width: 20%;
        height: 18px;
        background-color: #12d400;
    }
    .bar-2 {
        width: 65%;
        height: 18px;
        background-color: #ff0055;
    }
    .bar-1 {
        width: 40%;
        height: 18px;
        background-color: #a836f4;
    }
</style>
</head>
<body>
<span class="rateHeader">User Rating</span>
<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 rated"></span>
<span class="fa fa-star"></span>
<p>3.9 average based on 200 foodies.</p>
<div class="row">
<div class="data">
<div>5 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-5"></div>
</div>
</div>
<div class="data right">
<div>120</div>
</div>
<div class="data">
<div>4 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-4"></div>
</div>
</div>
<div class="data right">
<div>110</div>
</div>
<div class="data">
<div>3 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-3"></div>
</div>
</div>
<div class="data right">
<div>30</div>
</div>
<div class="data">
<div>2 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-2"></div>
</div>
</div>
<div class="data right">
<div>20</div>
</div>
<div class="data">
<div>1 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-1"></div>
</div>
</div>
<div class="data right">
<div>12</div>
</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、次のように表示されます。

CSSを使ってユーザー評価スコアカードを作成する方法

コードの解説

星アイコンによる平均評価の表示

Font Awesomeの「fa fa-star」クラスを使って星アイコンを5つ並べ、評価済みの星には「rated」クラスを付けて赤色＋黄色の枠線で強調しています。この例では4つの星がハイライトされ、平均評価「3.9」をひと目で伝えられるようになっています。

プログレスバーによる評価分布の可視化

各行は「data」（星のラベル）、「progressBar」（バー本体）、「right」（件数）の3つのカラムをfloatで横並びに構成し、「.row:after」によるクリアフィックスでレイアウト崩れを防いでいます。バーの幅（width）は評価の割合に応じて調整でき、星ごとに異なる配色を指定することで視認性を高めています。

カスタマイズのヒント

バーの高さや角丸（border-radius）、配色は自由に変更できます。また、実際のWebサイトではJavaScriptと連携して評価データから動的にバーの幅を算出すれば、より実用的なスコアカードとして活用できます。

  1. CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方

    CSSのjustify-contentプロパティを使用すると、フレックスコンテナの主軸方向（デフォルトでは水平方向）に沿って子要素の間や周囲のスペースを分配し、柔軟に配置を制御できます。本記事では、複数のDIV要素を「左・中央・右」のように分散配置する方法を、具体的なコード例と表示結果とともにわかりやすく解説します。 justify-contentプロパティの構文 justify-contentは、display: flex;を指定した親要素（フレックスコンテナ）に対して設定します。基本の構文は以下のとおりです。 セレクタ {     display:

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ