今回は、人気商品やアクセスの多い記事の表示に役立ちそうな、シンプルな王冠アイコン付きのランキングリストをCSSで装飾する方法をご紹介します。
最近話題の流行語大賞…は残念ながらランキングではないため、ほぼ同時期に発表されたGoogle検索による流行語ランキングをサンプルとして使用させていただきました。
また、可愛いひよこと王冠のイラストは「PIYOTASO」様よりお借りしました。どうもありがとうございます！
サンプルHTML＆CSS
以下がサンプルのHTMLとCSSになります。
※ランキングリストの装飾以外は、HTML＆CSSから割愛しています。
DEMO：
Google検索流行ランキング
- マイナンバー by 日本政府
- ラッスンゴレライ by 8.6秒バズーカー
- エンブレム by 東京オリンピック
- ドローン by 野波健蔵さん
- 北陸新幹線 by JR東日本＆西日本
HTML：
CSS：
対応ブラウザ：
IE9〜、Firefox、Chorme、Safari、Opera、iOS、Android
王冠アイコンの部分は、幅と高さをゼロに設定したエリアにborderを設定することで実現しています。borderのカラーを全て単色に変更してよりシンプル＆フラットなデザインにしたり、ランキング1位の金の王冠のみ大きくしてみても可愛いと思います。
また、上記のサンプルではなるべくシンプルなマークアップにするため疑似要素を利用しましたが、他のHTMLタグに直接適用することでIE8に対応させることも可能です。
サイト作成でちょっとしたランキングリストが必要な場合などに、皆様のお役に立てれば幸いです。