コーディング

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

この記事は2年以上前ですので、内容が古い可能性があります
CSSだけで作る王冠付きのランキングリスト

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

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

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


サンプルHTML&CSS

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

DEMO:

Google検索流行ランキング
  • マイナンバー by 日本政府
  • ラッスンゴレライ by 8.6秒バズーカー
  • エンブレム by 東京オリンピック
  • ドローン by 野波健蔵さん
  • 北陸新幹線 by JR東日本&西日本

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〜FirefoxChormeSafariOperaiOSAndroid

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

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

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

この記事をシェアする:
◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇

私たちと一緒に働きませんか?

「CSSだけで作る王冠付きのランキングリスト」はいかがでしたか?
株式会社プレスマンでは、 WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。 まずは募集職種をご覧の上、お気軽にお問い合わせください。 あなたとお会いできるのを楽しみにしています。

採用情報を見る

-コーディング
-,

© 2024 PRESSMAN*Tech Powered by STINGER