CSSだけで作る王冠付きのランキングリスト

今回は、人気商品やアクセスの多い記事の表示に役立ちそうな、シンプルな王冠アイコン付きのランキングリストをCSSで装飾する方法をご紹介します。

最近話題の流行語大賞…は残念ながらランキングではないため、ほぼ同時期に発表されたGoogle検索による流行語ランキングをサンプルとして使用させていただきました。
また、可愛いひよこと王冠のイラストは「PIYOTASO」様よりお借りしました。どうもありがとうございます！

サンプルHTML＆CSS

以下がサンプルのHTMLとCSSになります。
※ランキングリストの装飾以外は、HTML＆CSSから割愛しています。

DEMO：

HTML：

<ul class="ranking">
<li>マイナンバー<span>by 日本政府</span></li>
<li>ラッスンゴレライ<span>by 8.6秒バズーカー</span></li>
<li>エンブレム<span>by 東京オリンピック</span></li>
<li>ドローン<span>by 野波健蔵さん</span></li>
<li>北陸新幹線<span>by JR東日本＆西日本</span></li>
</ul>

CSS：

.ranking{
margin: 0;
padding: 0;
list-style-type: none;
}
.ranking li{
position: relative;
margin: 0;
padding: 0 0 0 16px;
border-bottom: 1px dotted #ccc;
}
.ranking li::before{
position: absolute;
top: 7px;
left: 1px;
color: #d05;
content: "★";
font-size: 9px;
}
.ranking li:first-child::before,
.ranking li:nth-child(2)::before,
.ranking li:nth-child(3)::before{
position: absolute;
top: 1px;
left: 0;
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 10px solid #fb0;
content: "";
}
.ranking li:first-child::after,
.ranking li:nth-child(2)::after,
.ranking li:nth-child(3)::after{
position: absolute;
top: 9px;
left: 0;
width: 0;
height: 0;
border: 6px solid #fb0;
border-top: 3px solid transparent;
border-bottom: 6px solid #f90;
content: "";
}
.ranking li:nth-child(2)::before{
border-bottom: 10px solid #ccc;
}
.ranking li:nth-child(2)::after{
border: 6px solid #ccc;
border-top: 3px solid transparent;
border-bottom: 6px solid #aaa;
}
.ranking li:nth-child(3)::before{
border-bottom: 10px solid #d98;
}
.ranking li:nth-child(3)::after{
border: 6px solid #d98;
border-top: 3px solid transparent;
border-bottom: 6px solid #c76;
}
.ranking li span{
color: #9ab;
font-size: 11px;
}

対応ブラウザ：
IE9〜、Firefox、Chorme、Safari、Opera、iOS、Android

王冠アイコンの部分は、幅と高さをゼロに設定したエリアにborderを設定することで実現しています。borderのカラーを全て単色に変更してよりシンプル＆フラットなデザインにしたり、ランキング1位の金の王冠のみ大きくしてみても可愛いと思います。

また、上記のサンプルではなるべくシンプルなマークアップにするため疑似要素を利用しましたが、他のHTMLタグに直接適用することでIE8に対応させることも可能です。

サイト作成でちょっとしたランキングリストが必要な場合などに、皆様のお役に立てれば幸いです。