よく見るレーティングスターの設定・カスタマイズ

レーティングスター

よく見かけるレーティングスターのCSSトリックを見かけたので練習がてら実装。

See the Pen Star Ratings by sidaconf (@sidaconf) on CodePen.

形は出来ましたけど、このままだとクリックして評価ができないのでその部分をどうにか。

See the Pen Star Ratings 2 of fieldset by sidaconf (@sidaconf) on CodePen.

これでクリックで押したところでレートが止まるようになりました。
form要素を使っているのでこっちのほうが実用的な気がします。
ただしCSSの指定で使っている:checkedは、ブラウザサポートがIE9以下は対応していないため注意が必要です。

ちなみにインスパイア元は前記事で紹介のFont Awesomeにある、Examplesページ下部にあるカスタマイズ例。
上記の例はCSSでtext-shadowなど使っているのでそれを解除しつつ、HTML/CSSを調整してあげればFont Awesomeのアイコンを使用しても実装できそうだと思いました。
できました↓

See the Pen Star Ratings use Font Awesome by sidaconf (@sidaconf) on CodePen.

codepenで外部CSSとしてFont Awesomeを読み込めたのでここで簡単に実装できました。
あとは値の送信(スキル範囲外ですが)と、Pixivの評価のように’+〜’とふわっと評価点数が出ればベターといったところでしょうか。

以上です。

参考

Star Ratings With Very Little CSS | CSS-Tricks

Accessible star rating widget with pure CSS | Lea Verou

:checked – CSS | MDN


今日聞いた曲

C調言葉に御用心 / サザンオールスターズ

すべての人へ / 齊藤理詠 FRAGILE ~さよなら月の廃墟~ FRAGILE MOONLIGHT TRAX

Queen Of Drangleic / 桜庭統 DARK SOULS II ORIGINAL SOUNDTRACK [Bonus Disc]

おしゃかしゃま / RADWIMPS

アトムの子 / 山下達郎 Juvenileのテーマ ~瞳の中のRainbow~

永遠と一瞬 / レミオロメン

マジックディスク / ASIAN KUNG-FU GENERATION

ビターズ / GOING UNDER GROUND

 980 Views