Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What is going on with this article?
@junara

CSSだけで星形レーティング(小数点スコアも対応version)

More than 3 years have passed since last update.

目的

  • 満点が星3個の時の星1.5個を表現する
  • こんな感じ。スクリーンショット 2016-10-18 19.29.09.png

コード

star.html
...
<div class="star-rating-box">
    <div class="empty-star">
    ☆☆☆
    </div>  
    <div class="filled-star">
    ★★★
    </div>  
</div>
...
star.css
.star-rating-box {
    position: relative; /* position: abosoluteの基準 */
    display: inline-block; /* 最大星数に応じてdivのwidthを伸縮させるため */
}
.filled-star {
    position: absolute; /* .filled-starと.empty-starを重ねる */
    top: 0; /* 左上の基準位置に移動させる */
    overflow: hidden; /* widthが足りない時、はみ出た分は表示しない */
    white-space: nowrap; /* widthが足りない時に、折り返さないようにする。 */
    width: 50%; /* 星1.5個 表示。= 100 * 1.5 / 3 */ 
}

解説

  • 欠けた星を表現するためにoverflow: hiddenwhite-space: nowrapwidth: xx%を.filled-starに指定するところがコツ。widthを小さくして、わざと星をdiv.filled-starからはみ出させる。はみ出た分は見えないため、ユーザーには欠けた星が認識される。
  • ratingが満点の場合=widht: 100%。あとは、ratingに比例してwidthの%を変化させて使用する

GlyphiconやFont Awsomeを使う!

☆と★を下記置き換えるだけ。
* ☆

Font Awsomeの場合
<i class="fa fa-star-o" aria-hidden="true"></i>
Glyphiconの場合
<span class="glyphicon glyphicon-star-empty"></span>
Font Awsomeの場合
<i class="fa fa-star" aria-hidden="true"></i>
Glyphiconの場合
<span class="glyphicon glyphicon-star"></span>

注意

  • div.star-rating-boxのwidth属性を指定すると、星の欠け具合が.filled-starのwidthと比例しなくなるかも。 display: inline-blockを指定したことで多分大丈夫。

応用

  • widthをtransition-propertyにすれば星がにゅーっと出てくるアニメーションができます。
  • 今回の例では、白抜きの星の部分にカーソルを合わせると星が塗られてきます。

https://gyazo.com/5b9791b1aa9801d6ddb7610d867f2c0f

star-transition.css
.star-rating-box {
    position: relative; /* position: abosoluteの基準 */
}
.filled-star {
    position: absolute; /* .filled-starと.empty-starを重ねる */
    top: 0;
    overflow: hidden; /* widthが足りない時、はみ出た分は表示しない */
    white-space: nowrap; /* widthが足りない時に、折り返さないようにする。 */
    width: 0%; /* 変更箇所 widthの初期値 */
    transition-property: width; /* 追加箇所 */
    transition-duration: 0.5s; /* 追加箇所 */
}

 /* 追加箇所 */
.empty-star:hover + .filled-star {
    width: 50%; /* 星1.5個 表示。= 100 * 1.5 / 3 */ 
}
  • 実際は、星の数やスコアを可変にしたいので、railsであればヘルパーなどを使って実装するとよいでしょう。

参考

以下駄文

  • 見た目が華やかになる応用編もつけたら面白いかなとおもって、使ったこともないtransitionに手を出したら、文書書き上げるのに時間がかかった。原因は、トリガをページ読み込み終了にしようと色々調べたこと(しかも、出来ず。)。javascriptを使えば余裕で出来るんだけど、それじゃ、タイトル詐欺になるので、CSSだけでなんとかしたかった。
  • 星形レーティングの表示のトリガーがhoverっておかしいのはわかっているのです。ただ、animationのタイミングまで理解仕切れなかった。
22
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
junara
10年間医療の研究していたが、Webサービス作りたくて、エンジニアへ。 Rails, Javascritptのエンジニアとして働きながら、生命科学学会検索サービスを作りました。 https://www.dokode.work
bldt
"Your growth, Improve the world" をビジョンに掲げ、自社事業やシステム開発サービスを提供しています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
22
Help us understand the problem. What is going on with this article?