へっぽこデザイン備忘録〜CSSだけで簡単にランキング順位を表示させる方法〜

4wtapgp3n14nfofgbaqakjacagbifaxapcvcp8hhly23sompviaaaaasuvork5cyii

夏にコートを捨ててしまったので、早く買いに行かないと死ぬかもしれません。
去年は掛け布団を捨てて凍えていました。

さて、今回は

CSSだけでランキング順位を表示させる方法

を紹介します!!

まくびーずブログのランキングにも順位が付いたんです!
皆さん気づきました!?気づきませんか!そうですか。

では、手順をご説明します。
コードだけ知りたい方はコチラに飛んでください。

counter-incrementとは?

どういうタグ?

今回使用するのは、counter-incrementというタグ。

インクリメント (increment) は、一般には増加という意味だが、コンピュータ用語としては、変数の値を1増やす演算のことである。 逆に、1減らす演算はデクリメント (decrement) である。

引用:wikipedia
へ〜〜!
単語の意味がわかるとタグも覚えやすいですよね。

このタグ、一体どういうものかというと、カウンターの役割をしてくれます!
divなどにも使えるそうです。

指定方法


■カウンター名
none→カウンターを更新しない場合に指定。
カウンター名→値を更新したいカウンター名を指定。(classやIDのように好きな名前をつける)

■更新値
更新する数値を指定します。2を入力すると、2,4,6,8…のように2ずつ増えます。マイナスの指定もできます。
何も記入しない場合には自動的に1になります。

使用法


まず、li要素で数値を更新するようにするため、contentの前にcounter-incrementを指定します。
また、今回はpタグでカウンター値をリセットするように、counter-resetを指定します。
そうすると、Pタグがくるたび、カウンターがリセットされて、また新しいランキングが作られます。

サンプル

■html


■CSS


どうでしょう!?
簡単でしょう!
最初は中々ランキングが反映されないかもしれません。
その場合は、counter-resetがきちんと指定されていないことが多いので、確認してみてください。

そして、これをなんやかんやいじくり回すとまくびーずブログのランクングになります!!
みなさんもどんどんご利用ください♪

参考サイトさま:counter-incrementプロパティの意味と使い方 | CSS | できるネット

関連記事

コメントは利用できません。

ピックアップ記事

  1. %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-16-1-27-57

    2016-11-16

    これから必ず来るのはこの女優3選!!!

    出典:http://www.incent.jp/incent/talent/iriyama/&nbs…

ピックアップ記事

  1. img108

    2016-10-4

    おもしろ可愛い♥ハロウィン限定メニュー2016!EGGS ’N THINGS、Q-pot CAFE、とらやカフェなどなど・・・

    ハロウィン限定メニュー&スイーツ特集もうすぐハロウィン!ということで、今回は都内のカフェを中心にハロ…

ピックアップ記事

  1. IMG_3517

    2016-7-17

    京都ダリ展に行って来ました

    7/1(金)から京都市美術館で開催している、 ダリ展に行ってきました。【過去のダリ展記事】 [blo…
ページ上部へ戻る
Top