PRESSMAN*Tech今回は、人気商品やアクセスの多い記事の表示に役立ちそうな、シンプルな王冠アイコン付きのランキングリストをCSSで装飾する方法をご紹介します。最近話題の流行語大賞...は残念ながらランキングではないため、ほぼ同時期に発表されたGoogle検索による流行語ランキングをサンプルとして使用させていただきました。可愛いひよこと王冠のイラストは「PIYOTASO」様よりお借りしました。ありがとうございます!サンプルHTML&CSS以下がサンプルのHTMLとCSSになります。※ランキングリストの装飾以外は、HTML&CSSから割愛しています。11px;}対応ブラウザ:IE9〜、Firefox、Chorme、Safari、Opera、iOS、Android王冠アイコンの部分は、幅と高さをゼロに設定したエリアにborderを設定することで実現しています。borderのカラーを全て単色に変更してよりシンプル&フラットなデザインにしたり、ランキング1位の金の王冠のみ大きくしてみても可愛いと思います。上記のサンプルではなるべくシンプルなマークアップにするため疑似要素を利用しましたが、他のHTMLタグに直接適用することでIE8に対応させることも可能です。サイト作成でちょっとしたランキングリストが必要な場合などに、皆様のお役に立てれば幸いです。(1539日経過)の記事です。内容が古い可能性があります。私たちと一緒に働きませんか?「CSSだけで作る王冠付きのランキングリスト」はいかがでしたか?株式会社プレスマンでは、WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。PRESSMANプレスマンのスタッフブログです。担当者の紹介デザイナーhino入社2年目のデザイナーです。見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。株式会社プレスマンのWebマーケティング部によるスタッフブログです。PRESSMAN*Tech.。