前回の「良い点悪い点リスト」に続き、もう1つ紹介します。今回は色んな人が集まるサイトでよくある「星で表示する5段階評価」です。ただしあくまで自分の評価を表示するだけであり、読者に評価してもらうものではないです。
まぁ、とにかくサンプルを見てもらえば、どんなものか分かると思います。
（使用しているテーマ等によっては、このcssがうまく動かなかったり調整が必要なことがあります。）
その1：ごく簡単にテキストで
demo
| 価格： | ★★★★★ |
|---|---|
| 見た目： | ★★★★★ |
| 耐久性： | ★★★★★ |
html
<table class="star-rating1"> <tr><th>価格：</th><td style="color:#ccc;"><span style="color:#f90;">★★</span>★★★</td></tr> <tr><th>見た目：</th><td style="color:#ccc;"><span style="color:#f90;">★★★★★</span></td></tr> <tr><th>耐久性：</th><td style="color:#ccc;"><span style="color:#f90;">★★★</span>★★</td></tr> </table>
ちょっとした解説
とくに何の工夫もなく、単にテキストで星（★）を表示して、点数分の星だけ<span style="color:#f90;"> ～ </span>で色を変えています。
ものすごく簡単で、10段階評価にしたい時は★の数を変えればいいだけです。ただし星半分というのができません。
その2：1つ1つlinear-gradient
demo
| 価格 | |
|---|---|
| 見た目 | |
| 耐久性 | |
html
<table class="star-rating2"> <tr><th>価格</th> <td style="background:linear-gradient(to right, #f90 0%, #f90 50%, #ccc 50%);"></td></tr> <tr><th>見た目</th> <td style="background:linear-gradient(to right, #f90 0%, #f90 20%, #ccc 20%);"></td></tr> <tr><th>耐久性</th> <td style="background:linear-gradient(to right, #f90 0%, #f90 80%, #ccc 80%);"></td></tr> </table>
css
.star-rating2 th{font-weight:normal;vertical-align:middle;font-size:0.9rem;padding:3px 4px 0 4px;} .star-rating2 td{font-family:blogicon;font-size:1.5em;-webkit-background-clip:text!important;-webkit-text-fill-color: transparent!important;}
使い方
- それぞれの項目の
<td>にあるbackground:linear-gradient(to right, #f90 0%, #f90 80%, #ccc 80%);の値を変更すると星の数が変わります。 #f90や#cccはカラーコードですので、好きな色に変えてください。- 0% 0% 80%という数字が、星が黄色くなっている部分のパーセンテージです。この場合は全体の80%なので星の最大数が5個なら星4つ、10個に増やせば星8個になります。
- 45%や78%など微妙な数字を使うこともできます。
ちょっとした解説
tdの中にあるというのは文字コードで、これにはてなブログ独自のアイコンフォントであるblogiconを適用させるととなります。これを5つ並べて星5個にしています。
background:linear-gradient(to right, #f90 0%, #f90 80%, #ccc 80%);は背景にグラデーションを設定しています。本来はグラデーションですが、80%を2回書くことでピタッと色が切り替わります。
こんな感じです。
-webkit-background-clip:text!important;-webkit-text-fill-color: transparent!important;というのは、これで背景をその要素内のテキストの形に切り取り、さらに文字色を透明にしいていることで、テキストのその背景を貼り付けたように見せることができます。
Hatena Blog
（背景をグラデーションさせて）
Hatena Blog
（テキストの形でくり抜く）
これを使って、テキストの色を背景色（グラデーション）で操作しています。
うまく表示されない例
テーマによってはよくあるのですが、今回の表示で使っているtableにborder-collapse:collapse;が設定されているとうまく表示できなかったりします。（-webkit-background-clip:text!important;-webkit-text-fill-color: transparent!important;がきかない。）この星を表示するtableだけでもborder-collapse:separate;にしてあげるといいと思います。（このページではそういう上書きをしています。）
その3：クラスにまとめる
demo
| 価格 | |
|---|---|
| 見た目 | |
| 耐久性 | |
html
<table class="star-rating3"> <tr><th>価格</th> <td class="rate0"></td></tr> <tr><th>見た目</th> <td class="rate45"></td></tr> <tr><th>耐久性</th> <td class="rate100"></td></tr> </table>
css
.star-rating3 th{font-weight:normal;vertical-align:middle;font-size:0.9rem;padding:3px 4px 0 4px;} .star-rating3 td{font-family:blogicon;font-size:1.5em;-webkit-background-clip: text!important;-webkit-text-fill-color: transparent!important;} .star-rating3 .rate0{background: linear-gradient(to right, #f90 0%, #f90 0%, #ccc 0%);} .star-rating3 .rate5{background: linear-gradient(to right, #f90 0%, #f90 5%, #ccc 5%);} .star-rating3 .rate10{background: linear-gradient(to right, #f90 0%, #f90 10%, #ccc 10%);} .star-rating3 .rate15{background: linear-gradient(to right, #f90 0%, #f90 15%, #ccc 15%);} .star-rating3 .rate20{background: linear-gradient(to right, #f90 0%, #f90 20%, #ccc 20%);} .star-rating3 .rate25{background: linear-gradient(to right, #f90 0%, #f90 25%, #ccc 25%);} .star-rating3 .rate30{background: linear-gradient(to right, #f90 0%, #f90 30%, #ccc 30%);} .star-rating3 .rate35{background: linear-gradient(to right, #f90 0%, #f90 35%, #ccc 35%);} .star-rating3 .rate40{background: linear-gradient(to right, #f90 0%, #f90 40%, #ccc 40%);} .star-rating3 .rate45{background: linear-gradient(to right, #f90 0%, #f90 45%, #ccc 45%);} .star-rating3 .rate50{background: linear-gradient(to right, #f90 0%, #f90 50%, #ccc 50%);} .star-rating3 .rate55{background: linear-gradient(to right, #f90 0%, #f90 55%, #ccc 55%);} .star-rating3 .rate60{background: linear-gradient(to right, #f90 0%, #f90 60%, #ccc 60%);} .star-rating3 .rate65{background: linear-gradient(to right, #f90 0%, #f90 65%, #ccc 65%);} .star-rating3 .rate70{background: linear-gradient(to right, #f90 0%, #f90 70%, #ccc 70%);} .star-rating3 .rate75{background: linear-gradient(to right, #f90 0%, #f90 75%, #ccc 75%);} .star-rating3 .rate80{background: linear-gradient(to right, #f90 0%, #f90 80%, #ccc 80%);} .star-rating3 .rate85{background: linear-gradient(to right, #f90 0%, #f90 85%, #ccc 85%);} .star-rating3 .rate90{background: linear-gradient(to right, #f90 0%, #f90 90%, #ccc 90%);} .star-rating3 .rate95{background: linear-gradient(to right, #f90 0%, #f90 95%, #ccc 95%);} .star-rating3 .rate100{background: linear-gradient(to right, #f90 0%, #f90 100%, #ccc 100%);}
使い方
- その2のやり方が、html内に直接スタイルを書き込んでいてあまり美しくないのとわかりにくいので、それらを予めクラスに割り当てたバージョンです。
.rate0から.rate100まで5%単位で設定済みです。- 上のhtmlの
<td class="rate45">の数字部分を変えるとその%まで星が光ります。 - 基本的にやってることはその2と変わりませんが、ゴチャゴチャした記述はデザインcssに押しやってしまえば、クラス名を書くだけなのでスッキリします。その2よりもこっちのほうがわかりやすいかと。
その4：星の横に評点を表示
demo
| 価格 | |
|---|---|
| 見た目 | |
| 耐久性 | |
html
<table class="star-rating4"> <tr data-text="0.5"><th>価格</th> <td class="rate05"></td></tr> <tr data-text="3.0"><th>見た目</th> <td class="rate30"></td></tr> <tr data-text="2.5"><th>耐久性</th> <td class="rate25"></td></tr> </table>
css
.star-rating4 th{font-weight:normal;vertical-align:middle;font-size:0.9rem;padding:3px 4px 0 4px;} .star-rating4 td{font-family:blogicon;font-size:1.5em;-webkit-background-clip: text!important;-webkit-text-fill-color: transparent!important;} .star-rating4 tr::after{content: attr(data-text);font-size:0.9rem;color:#333;padding:0.5rem 0 0 0.2rem;display:inline-block;} .star-rating4 .rate00{background: linear-gradient(to right, #f90 0%, #f90 0%, #ccc 0%);} .star-rating4 .rate05{background: linear-gradient(to right, #f90 0%, #f90 10%, #ccc 10%);} .star-rating4 .rate10{background: linear-gradient(to right, #f90 0%, #f90 20%, #ccc 20%);} .star-rating4 .rate15{background: linear-gradient(to right, #f90 0%, #f90 30%, #ccc 30%);} .star-rating4 .rate20{background: linear-gradient(to right, #f90 0%, #f90 40%, #ccc 40%);} .star-rating4 .rate25{background: linear-gradient(to right, #f90 0%, #f90 50%, #ccc 50%);} .star-rating4 .rate30{background: linear-gradient(to right, #f90 0%, #f90 60%, #ccc 60%);} .star-rating4 .rate35{background: linear-gradient(to right, #f90 0%, #f90 70%, #ccc 70%);} .star-rating4 .rate40{background: linear-gradient(to right, #f90 0%, #f90 80%, #ccc 80%);} .star-rating4 .rate45{background: linear-gradient(to right, #f90 0%, #f90 90%, #ccc 90%);} .star-rating4 .rate50{background: linear-gradient(to right, #f90 0%, #f90 100%, #ccc 100%);}
使い方
- 基本的にはその3と同じで、星のパーセンテージをクラス名で指定します。
<td class="rate25">という部分です。 - また、
<tr data-text="2.5">の部分に実際に表示される評点を入力します。
ちょっとした解説
<tr data-text="2.5">で評点を入力し、それを表示するのはtr::after{content: attr(data-text);}の部分で行っています。
contentに指定したattrは、要素内の指定属性（この場合はdata-text）の値を表示するというものです。これを使って、trのafter疑似要素として評点を表示しています。
その5：Amazonっぽく
最後は星ではないのですが、こういうのもアリかと。
demo
| 価格 | 5.0 | |
|---|---|---|
| 見た目 | 1.5 | |
| 耐久性 | 10.0 | |
| 重量 | 0.0 |
html
<table class="star-rating5"> <tr><th>価格</th> <td class="rrr"><div style="width:50%;"></div></td><td>5.0</td></tr> <tr><th>見た目</th> <td class="rrr"><div style="width:15%;"></div></td><td>1.5</td></tr> <tr><th>耐久性</th> <td class="rrr"><div style="width:100%;"></div></td><td>10.0</td></tr> <tr><th>重量</th> <td class="rrr"><div style="width:0%;"></div></td><td>0.0</td></tr> </table>
css
table.star-rating5 th, table.star-rating5 td{font-weight:normal;line-height:2em;padding:4px;font-size:0.8rem;} table.star-rating5 td.rrr{width:10em;padding:0;} table.star-rating5 td.rrr::before{content:'';display:inline-block;width:10em;height:1.5em;background:#f0f0f0!important;position:absolute;z-index:0;border:1px solid #ccc;box-shadow:0 1px 1px rgba(0,0,0,0.1)inset!important;} table.star-rating5 td div{height:1.5em;background: linear-gradient(to bottom, #ffc800 0%, #ffad00 100%);border:1px solid rgba(100,75,20,0.5);box-shadow:0 1px 0px rgba(255,255,255,0.3)inset;position:relative;z-index:1;}
使い方
widthで指定したパーセンテージがそのままバーの色の着いた部分です。- その次の数字が表示される評点なので、それとパーセンテージをうまく合わせてください。
まとめ
大きさや軽さ、見た目など、レビューする製品ごとにポイントとなる項目は違うと思いますが、それらが5段階や10段階の星で評価されていると、その製品の特徴というかおすすめ度なんかがわかりやすいと思います。
ただ、あくまで星をそれっぽく見せているだけです。Googleの検索結果に評価の星を載せるとかそういうものではありません。その点は勘違いなさらぬよう。
また、あいかわらずcssが汚いです。すいません。思いついたものから順番に書いているのでまとまってないんですよね。個人でしか作業しないので、これでもいいんですよ…。ちゃんと改行したりインテント使ったりコメント入れたりすればもっとわかりやすいと思うのですが、そうすると記事が縦に伸びーるのがあまり好きじゃないんですよね…。
さてさてそういうわけで、前回の「良い点悪い点リスト」と合わせて使ってもらえれば、レビュー記事がなんかそれっぽく見えるのではないかと思います。今回の星なんかは、まだまだcss装飾の余地がありまくりなので、ご自身でもっとカスタマイズしてみちゃってくださいね。
