星の塗る量は style="--cs-rate: 4.5" の数字(0〜5)で決まります。4.3 のような小数もそのとおりに塗られます。読み上げ用に aria-label にも同じ点数を書いてください。
REVIEW
評価・口コミ・ランキングのCSS素材
星の数の評価、口コミのカード、ランキングの見せ方です。見本の口コミは文章の例です。実際の声に差し替えて使ってください。
10種類
見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 星の数は --cs-rate で変えられます(rv01と同じ作り)。
バーの長さは各行の style="--cs-p: 62%" で決まります。件数から割合を出して書き入れてください。
順位の数字は counter で自動で入り、1〜3位だけ金・銀・銅の王冠になります(王冠はSVG)。4位からは丸の中に数字が出ます。
見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 吹き出しの下に、話した人のアイコンと属性を置いています。アイコンは文字1字でも <img> でもかまいません。
平均点・星・件数をひとまとめにした見出し用の素材です。星の塗りは --cs-rate の数字で決まります。数字は例です。
中身はラジオボタンなので、そのままフォームで送信できます(name="rating")。マウスを乗せた星までが光り、キーボードでは矢印キーで選べます。星の色づけに :has() を使っています。
項目ごとの点数を、5つに区切ったメーターで見せます。塗る数は各行の style="--cs-v: 4"(1〜5)で決まります。
見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 口コミを横に並べ、指やトラックパッドで横にスクロールします。scroll-snap で1枚ずつ止まり、次のカードが少しのぞくので続きがあると分かります。
見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 ボタンを押すと数が1つ増え、もう一度押すと戻ります(見た目だけの動きです。数を保存するにはサーバー側の仕組みが必要です)。
