カテゴリ一覧

REVIEW

評価・口コミ・ランキングのCSS素材

星の数の評価、口コミのカード、ランキングの見せ方です。見本の口コミは文章の例です。実際の声に差し替えて使ってください。

10種類

星の塗る量は style="--cs-rate: 4.5" の数字(0〜5)で決まります。4.3 のような小数もそのとおりに塗られます。読み上げ用に aria-label にも同じ点数を書いてください。

口コミのカード

  • CSSのみ
  • 一覧

見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 星の数は --cs-rate で変えられます(rv01と同じ作り)。

バーの長さは各行の style="--cs-p: 62%" で決まります。件数から割合を出して書き入れてください。

順位の数字は counter で自動で入り、1〜3位だけ金・銀・銅の王冠になります(王冠はSVG)。4位からは丸の中に数字が出ます。

吹き出しの口コミ

  • CSSのみ
  • 吹き出し

見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 吹き出しの下に、話した人のアイコンと属性を置いています。アイコンは文字1字でも <img> でもかまいません。

平均点・星・件数をひとまとめにした見出し用の素材です。星の塗りは --cs-rate の数字で決まります。数字は例です。

星を押して評価を選ぶ入力欄

  • CSSのみ
  • フォーム
  • クリック

中身はラジオボタンなので、そのままフォームで送信できます(name="rating")。マウスを乗せた星までが光り、キーボードでは矢印キーで選べます。星の色づけに :has() を使っています。

横にスクロールする口コミ

  • CSSのみ
  • スクロール
  • スマホ向け

見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 口コミを横に並べ、指やトラックパッドで横にスクロールします。scroll-snap で1枚ずつ止まり、次のカードが少しのぞくので続きがあると分かります。

見本の口コミは文章の例です。実際にいただいた声に差し替えてください。 ボタンを押すと数が1つ増え、もう一度押すと戻ります(見た目だけの動きです。数を保存するにはサーバー側の仕組みが必要です)。