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

を紹介します！！

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

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

1 counter-incrementとは？
- 1.1 どういうタグ？
- 1.2 指定方法
2 使用法

counter-incrementとは？

どういうタグ？

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

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

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

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

指定方法

counter-increment : カウンター名 更新値;

1	counter-increment : カウンター名更新値;

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

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

使用法

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

サンプル

■html

  <p>スーパーで買える美味しい納豆ランキング</p>
  <ul>
    <li>ミツカン「金のつぶ たれたっぷり！たまご醤油たれ」</li>
    <li>こいしや食品「平家大粒納豆」</li>
    <li>おかめ納豆「旨味（こんぶだし）」</li>
  </ul>

  <p>コーヒー嫌いが選ぶ！おいしく飲めるコーヒー</p>
  <ul>
    <li>高千穂牧場『カフェ・オ・レ』</li>
    <li>グリコ『カフェオーレCreamy』</li>
    <li>上島珈琲店『豆乳ミルク珈琲』</li>
  </ul>

<p>スーパーで買える美味しい納豆ランキング</p>

<ul>

<li>ミツカン「金のつぶたれたっぷり！たまご醤油たれ」</li>

<li>こいしや食品「平家大粒納豆」</li>

<li>おかめ納豆「旨味（こんぶだし）」</li>

</ul>

<p>コーヒー嫌いが選ぶ！おいしく飲めるコーヒー</p>

<ul>

<li>高千穂牧場『カフェ・オ・レ』</li>

<li>グリコ『カフェオーレCreamy』</li>

<li>上島珈琲店『豆乳ミルク珈琲』</li>

</ul>

■CSS

  p{counter-reset: rank; }
  ul{list-style-type: none; }
  li::before{
    counter-increment: rank;
    content: counter(rank)"位："; /*位：は好きな文字に変更可能。空なら何も表示されない。*/
  }