CSSで画像の上にランキングを表示させる方法
2020年06月14日 プログラミングTIPS
先日の「「J-POP最新人気曲ランキング100」作りました！」で作った「
J-POP最新人気曲ランキング100」。下の方にスクロールしていくと、ランキングサイトなのに「この曲が何位なのかわからない」という問題が発生しましたので、改良することにしました。
改良の結果、現在ではこのような表示になっています。アートワークの左上に順位が表示されています。
しかも、よく見ると透けてます！アートワークを邪魔しないように、下の画像が微妙に透けるような処理にしました。これはサーバー上で何か難しい処理をしたわけではなく、JavaScriptを使ったわけでもありません。CSSで簡単にできます。
改良の結果、現在ではこのような表示になっています。アートワークの左上に順位が表示されています。
しかも、よく見ると透けてます！アートワークを邪魔しないように、下の画像が微妙に透けるような処理にしました。これはサーバー上で何か難しい処理をしたわけではなく、JavaScriptを使ったわけでもありません。CSSで簡単にできます。
今回のサイトではHTMLでitemというdivクラスで曲の情報を囲っているので、この.itemをCSSのcounter-incrementでカウントします。
これで、itemが繰り返される度にrankの数値が連番で増え続けます。
この情報を今度は、.item-artworkのdiv内の:before擬似要素で表示させます（.itemでカウントした情報なのに、別のクラスの.item-artworkでも使えるのがポイントです）。
「content: counter(rank)"位";」のところです。これで連番で振られた「rank」の数字と漢字の「位」が表示されます。
ついでに、border-radiusで適当な丸みを付け、opacityで半透明にしました。その結果、このように微妙に透けるランキング表示が出来上がったというわけです（透け具合はopacityで調整できます）。
counter-incrementは、HTMLで連番を振りたいときに使えるテクニックですので、覚えておいて損はないと思います。
それと、J-POP最新人気曲ランキング100にはTwitterでの検索機能も追加しました。ぜひご利用ください。
.item {
counter-increment: rank;
}
この情報を今度は、.item-artworkのdiv内の:before擬似要素で表示させます（.itemでカウントした情報なのに、別のクラスの.item-artworkでも使えるのがポイントです）。
.item-artwork::before {
content: counter(rank)"位";
background-color: #bf0000;
font-size: 85%;
display: block;
position: absolute;
color: #ffffff;
padding: 0.2em 0.2em 0.2em 0;
font-weight: bold;
width: 4.5em;
text-align: center;
opacity: 0.8;
border-radius: 0 18px 18px 0;
box-sizing: border-box;
}
ついでに、border-radiusで適当な丸みを付け、opacityで半透明にしました。その結果、このように微妙に透けるランキング表示が出来上がったというわけです（透け具合はopacityで調整できます）。
counter-incrementは、HTMLで連番を振りたいときに使えるテクニックですので、覚えておいて損はないと思います。
それと、J-POP最新人気曲ランキング100にはTwitterでの検索機能も追加しました。ぜひご利用ください。