ここでは、ネット通販サイトなどで使えるランキングの王冠画像をスタイルシートを使ってサムネイルに重ねて表示させる方法について見ていきます。
コンテンツ
王冠画像をサムネイルに付ける方法
今回は、
このサムネイルに、
この王冠イラストを重ねて表示させてみます。ここでお話する方法を使えば、一度スタイルシートに設定するだけで、いろんなページで汎用できますのでぜひ活用してみてください。
まずは結論から見てみましょう。
ボタンで表示を切り替えてご覧ください。
See the Pen xQNyvL by kenichi (@ken81) on CodePen.
HTML
<a href="#">
<div class="ranking">
<img src="https://cotodama.co/wp-content/uploads/2018/12/css-ranking-img01.png">
</div>
</a>
CSS
.ranking{
position: relative;
display: inline-block;
}
.ranking::after{
content: "";
background:url(https://cotodama.co/wp-content/uploads/2018/12/css-ranking-img02.png);
background-repeat: no-repeat;
background-size: contain;
width: 35%;
height: 90px;
position: absolute;
top: 10px;
left: 10px;
}
こんな感じになっています。
コードの解説
それでは、仕組みについてお話します。
最初は、HTMLから。
HTML
<a href="#">
<div class="ranking">
<img src="https://cotodama.co/wp-content/uploads/2018/12/css-ranking-img01.png">
</div>
</a>
基本はサムネイルをバナーリンクとして有効にしたいので、全体の要素をリンクタグ<a>~</a>でラップします。そして、その中に”ranking”というクラス名のdiv要素を入れました。さらに、その中に画像タグを入れてあります。この”ranking”というクラス属性に対してこれからスタイルシートを仕掛けていきます。
CSS
スタイルシートを見てみましょう。
.ranking{
position: relative;
display: inline-block;
}
.ranking::after{
content: "";
background:url(https://cotodama.co/wp-content/uploads/2018/12/css-ranking-img02.png);
background-repeat: no-repeat;
background-size: contain;
width: 35%;
height: 90px;
position: absolute;
top: 10px;
left: 10px;
}
はじめに、”ranking”というクラス属性のdiv要素に、position: relative;を効かせてあります。これは、子要素で表示させる王冠画像の配置をposition: absolute;で指定するときの基点としてdiv要素を利用することが目的です。
display: inline-block;を使ったのは、今回はサムネイルの右側に余白があったので王冠画像のサイズをパーセント指定したときにサムネイルの大きさと王冠の大きさのバランスを取れるようにするためです。複数のサムネイルをぴっちり横に並べるような場合は、imgタグとその親要素であるdivタグのwidthが同じになるので、この指定は必要ないと思います。
次は、.ranking::afterです。これは疑似要素と言って、本来存在しない要素を擬似的に表示させるときに使用します。次のcontent: "";の部分が要素を表示させるためのプロパティなのですが、ここは空欄にしてあります。ここで王冠画像のURLを指定して画像を表示させても良いのですが、contentプロパティで画像を表示させてしまうと画像サイズの調整ができなくなってしまうので、次のbackgroundプロパティで背景画像として表示させます。
background:url()は背景を指定するプロパティです。ここに王冠画像のURLを指定して王冠を表示させました。次に、background-repeat: no-repeat;で王冠が繰り返し表示されてしまうのを防いでいます。background-size: contain;を指定すると、その要素がどんなサイズになったとしても指定した画像全体を表示させることができます。
position: absolute;は、要素の位置を基点からの距離で指定するためのプロパティです。先ほど、親要素divに、position: relative;を効かせておきましたので、このdiv要素の左上の角が基点になります。 top: 10px;, left: 10px;でそれぞれ上から10px、左から10pxに配置しました。このあたりは状況に合わせて微調整してみてください。
以上で、サムネイルに王冠画像を重ねて表示させることができました。
