おおたおおた
2017/08/25

CSSで表現する星形レーティング

この記事は約3分で読めます。

CSSで表現する星形レーティング

CSS

よく食べログや、Apple Storeなどでも評価レビューで星形のランク付けがありますよね。
キリの良い数字ならまだしも、3.2や3.5など…微妙な星を画像で出力するのは大変です。
今回はCSSのみで出力する方法を紹介します♪

基本的な構造

こちらはシンプルな構造の星形レーティングです。
(SCSSが分からない方はCodepenのサイトから「CSS」矢印を押して「View Complied CSS」で確認できます。)

See the Pen cssでレーティング評価の星を表現 by 彩 (@maritime_color) on CodePen.0

構造としては、空の<span></span>タグの:before{content:’★★★★★’}グレーの星、after要素に色付きの星、
display:inline-block;で幅を設定、グレーの星の数分の幅をoverflow:hidden;としています。

そして上記「Result」でも見られるように、rate1 , rate1-5 , rate2 …といったクラスが付いているのでそれに合わせて星が出現するようになっています。

星形レーティング:応用

 

See the Pen CSS star ratings by dodozhang21 (@dodozhang21) on CodePen.0

こちらはHoverした時にコメントがでるようになっています。
作りとしては上記のものと似ています。
星はgoogleのwebフォントを使用しているようですが、半分の星のフォントもあるみたいです。
SCSSの一番下の行を見てみると分かりますが、★は「f005」、半分★は「f089」らしいです。

こういう方法が…(^ω^)勉強になります!

CSSで表現する星形レーティング
おおた イラストレーター / フロントエンジニア

リトルトゥースです。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。