よくアプリのレート評価などで星マーク(★)を使った表現が使われます。
無評価の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の両方に変更イベントを書いてみました。一応FirefoxとGoogle Chromeの最新版では動確済み。
どちらの問題も、今回の記事向けに動的変更要素を足したために発生した問題で、本題とは無関係です。
単純にレートを表現するのであれば、冒頭のCSSをspan
タグにでも埋めてあげて、適当にwidthを指定してあげれば良いです。
スライダー横の数字は動的に指定したwidth
の数値です。参考資料にしてみてください。なお、px指定なのでフォントサイズで変わると思います。(←意味ない)