【スタンダードデザイン】サイドコンテンツ(ランキング)の配置Step7

前回の記事

【スタンダードデザイン】サイドコンテンツ(検索窓)の配置Step6

2018.02.11

前回に引き続いてサイドコンテンツを作成します。
今回はその中のランキングを作成します。
ol,liタグで並べつつデザインをしていきます。
ランキングは上位3つはデザインを変えたいので、要素の番目を指定したデザインを行なっています。

Contents

HTML

リストはol,ulとありますが、数値に意味があるときはolを使います。
画像、span(ランキング番号)、説明文の順で配置します。

CSS

list-style-type: none;はolの数値を消します。数値は別に表示するようにします。
counter-reset: ranking;は後述のcounter-increment: ranking;で数値を増加します。

transform: rotate(45deg);で正方形を回転させてひし形を作成します。
擬似クラスのbeforeでcontent: counter(ranking);を使って数値を重ねて表示させます。
この場合、中身の数値も回転してしますので、transform: rotate(-45deg);で数値の回転を戻します。

nth-of-type(n) nに数値を入れることでn番目の要素にスタイルを適用することができます。
今回はランキングなので上位1、2、3にそれぞれ色を割り当てています。
また、上位3つに対して文字の色などのデザインも変更しています。

ランキングの作成は以上です。
次回はリストによるリンクを並べます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です