CSSでレート評価(★)を表現してみる

よくアプリのレート評価などで星マーク(★)を使った表現が使われます。

無評価の0から5つ星の6段階であれば、星マークをただ並べれば良いのですが、評価人数の母体が増えると、平均して3.7つ星なんていう状況も出てきます。

 

そんな表現をCSSだけで出来ないかなー、と思って書いてみました。

レート評価っぽいこと

解説はすっ飛ばして、作ってみたのがこちら。

 

html5で追加されているinputタグの"range"でゲージを操作すると、レート評価が変わります。

変更させているのはwidth属性のみです。ベースとなるCSSは以下を定義。

.rate:after {
  content: '★★★★★';
  display: inline-block;
  overflow: hidden;
  color: orange;
  width: 40px;
}

「擬似要素」と呼ばれるCSSの仕組みで、class属性に"rate"を指定した要素の後ろに★5つを付与しています。

inline-blockでインラインブロックとしwidthを指定できるようにして、はみ出た部分はoverflowで隠します。

 

基本骨子はあっさりできたのですが、問題点が2つありました。

CSSのafterが動的に変更できない

通常、CSSを指定するには<style>タグをヘッダに付けるか、要素に対しstyle属性を書きます。

ところが、後者だとafterって書けないんじゃないか。よしんば、書けたとしてもどうやって変更すればよいのか。

調べてみたら以下の記事を見つけました。

jQuery - :afterなどのCSS擬似要素のStyleを動的に変更する - Qiita

どうやら、beforeやafterなどの擬似要素はDOMではないためセレクタでアクセスできないようです。

今回は、記事内の方法を参考にwidthをむりやり動的に変更してみました。

input:rangeのトリガーがよくわからない

初めてinputタグの"range"を使ってみたのですが、動かしたときのトリガーがよくわかりません。

こちらも調べてみましたが、ブラウザによって発火のイベントもタイミングも異なるそうです。

input:range のスライダー変更検知イベントは oninput? - 犬ターネット

上記事の通りonchangeとoninputの両方に変更イベントを書いてみました。一応FirefoxGoogle Chromeの最新版では動確済み。

 

 

どちらの問題も、今回の記事向けに動的変更要素を足したために発生した問題で、本題とは無関係です。

単純にレートを表現するのであれば、冒頭のCSSspanタグにでも埋めてあげて、適当にwidthを指定してあげれば良いです。

スライダー横の数字は動的に指定したwidthの数値です。参考資料にしてみてください。なお、px指定なのでフォントサイズで変わると思います。(←意味ない)