先日、評価を星の数で表す機会がありまして。
表現の仕方は色々あるけど、変数を代入してフレキシブルな感じにね。
CSSでできたらいいな～と思って調べたところ、SCSS？を使うとかCSSでやるにもイマイチ微調整が効かなかったり。
SCSSって何なんだろ、わたしはノータッチなので詳しくないしorz
しっくりくるものが無かったので結局自力で組むことにしました。
完成形DEMO
★★★★★
▼html
<p class="yws_star">★★★★★</p>▼CSS
.yws_star{
position:relative;
font-size:100px;
line-height:1em;
letter-spacing:-.2em;
color:#ccc;
margin:0;
padding:0;
}
.yws_star:before{
content:"★★★★★";
position:absolute;
color:#f60;
width:calc( 3.5em - .2 * ( 3.5em - .5em ) );
overflow:hidden;
white-space:nowrap;
}簡単な説明
テキストで灰色の星の記号部分を書いて、その上にCSSの疑似要素でオレンジの星を重ねています。
ポイントは２つ。
- 重ねる星はフレキシブルに指定可能
- 星の間隔を調整
という感じです。
重ねる星はフレキシブルに指定可能
DEMOでは「3.5em」という個所で星評価3.5を表しています。
3emにすれば星は３つになり、4.2emにすれば星は4.2個になります。
▼3em
★★★★★
width:calc( 3em - .2 * ( 3em - .5em ) );▼4.2em
★★★★★
width:calc( 4.2em - .2 * ( 4.2em - .5em ) );星の間隔を調整する
検索すると出てくる記事のままだと、星と星の間の間隔が空いてしまっていました。
フォントにもよるのかな。
以下の様な感じです。
★★★★★
まぁ、不具合っていうほどではないけど、なんだろ地味に気になってね。
これを調整するために、まず「yws_star」に、
letter-spacing:-.2em;を入れて 0.2em 縮めています。
更に「yws_star:before」に、
width:calc( 3.5em - .2 * ( 3.5em - .5em ) );というのを入れて、重ねる星の間隔も星の数だけ縮めています。
( 3.5em – .5em ) の意味は、星の数3.5個分に対して0.2em縮めるということです。
-.5em で0.5em分引いているのは、文字に対して片側だけ0.2em縮めるためです。
letter-spacing を使うと左右に対して縮まるけれど、今回は最後の星に関しては片側だけ縮めたい・・・
ということで、1emの半分という意味で-.5emにしています。
あとは変数を代入すればOK
DEMOだと静的に表示させているけれど、これを動的に表示させるにはPHPやJavascriptなどで変数を代入すればOKです。
font-size や letter-spacing 、color は任意に変更してね。
星の数の部分、すなわち 3.5em の箇所に変数です。
あとがき
2021年です。
新年あけましておめでとうございます。
年末年始に合わせるかのようにコロナが過去最高を更新し続けているので、今年はお正月特番を見ながら大人しく過ごしています(´・ω・`)
実家からは白菜や大根が大量に届きました。
しばらくは鍋にしよっと。
時間がある時にこのブログも書こうと思ってたけど、結局はダラダラと過ごして今日になりましたorz
この調子だとあっという間に2月になっていそう(;´Д｀)
コメントを残す