読者です 読者をやめる 読者になる 読者になる

牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

CSSで星のレーティング評価を0.0〜5.0で表示するメモ

こんなの

f:id:CortYuming:20170322125426p:plain

html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>sample</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <h2>Star Rating</h2>

        <div class="star-rating">
            <div class="star-rating-front" style="width: 50%">★★★★★</div>
            <div class="star-rating-back">★★★★★</div>
        </div>
    </body>
</html>

css

.star-rating {
  position: relative;
  width: 5em;
  height: 1em;
  font-size: 25px;

}
.star-rating-front {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #ffcc33;
}
.star-rating-back {
  color: #ccc;
}

参考

www.webtoolnavi.com