へっぽこデザイン備忘録〜CSSだけで簡単にランキング順位を表示させる方法〜
夏にコートを捨ててしまったので、早く買いに行かないと死ぬかもしれません。
去年は掛け布団を捨てて凍えていました。
さて、今回は
CSSだけでランキング順位を表示させる方法
を紹介します!!
まくびーずブログのランキングにも順位が付いたんです!
皆さん気づきました!?気づきませんか!そうですか。
では、手順をご説明します。
コードだけ知りたい方はコチラに飛んでください。
counter-incrementとは?
どういうタグ?
今回使用するのは、counter-incrementというタグ。
インクリメント (increment) は、一般には増加という意味だが、コンピュータ用語としては、変数の値を1増やす演算のことである。 逆に、1減らす演算はデクリメント (decrement) である。
引用:wikipedia
へ〜〜!
単語の意味がわかるとタグも覚えやすいですよね。
このタグ、一体どういうものかというと、カウンターの役割をしてくれます!
divなどにも使えるそうです。
指定方法
1 |
counter-increment : カウンター名 更新値; |
■カウンター名
none→カウンターを更新しない場合に指定。
カウンター名→値を更新したいカウンター名を指定。(classやIDのように好きな名前をつける)
■更新値
更新する数値を指定します。2を入力すると、2,4,6,8…のように2ずつ増えます。マイナスの指定もできます。
何も記入しない場合には自動的に1になります。
使用法
まず、li要素で数値を更新するようにするため、contentの前にcounter-incrementを指定します。
また、今回はpタグでカウンター値をリセットするように、counter-resetを指定します。
そうすると、Pタグがくるたび、カウンターがリセットされて、また新しいランキングが作られます。
■html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p>スーパーで買える美味しい納豆ランキング</p> <ul> <li>ミツカン「金のつぶ たれたっぷり!たまご醤油たれ」</li> <li>こいしや食品「平家大粒納豆」</li> <li>おかめ納豆「旨味(こんぶだし)」</li> </ul> <p>コーヒー嫌いが選ぶ!おいしく飲めるコーヒー</p> <ul> <li>高千穂牧場『カフェ・オ・レ』</li> <li>グリコ『カフェオーレCreamy』</li> <li>上島珈琲店『豆乳ミルク珈琲』</li> </ul> |
■CSS
1 2 3 4 5 6 |
p{counter-reset: rank; } ul{list-style-type: none; } li::before{ counter-increment: rank; content: counter(rank)"位:"; /*位:は好きな文字に変更可能。空なら何も表示されない。*/ } |
どうでしょう!?
簡単でしょう!
最初は中々ランキングが反映されないかもしれません。
その場合は、counter-resetがきちんと指定されていないことが多いので、確認してみてください。
そして、これをなんやかんやいじくり回すとまくびーずブログのランクングになります!!
みなさんもどんどんご利用ください♪
参考サイトさま:counter-incrementプロパティの意味と使い方 | CSS | できるネット
マーシー武田
最新記事 by マーシー武田 (全て見る)
- 岩井俊二の伝説的ドラマ『打ち上げ花火、下から見るか?横から見るか?』大根仁×新房昭之でアニメ映画化!声優には宮野真守、広瀬すず、菅田将暉… - 2016/12/08
- 参考にしたい最新ランディングページ5選〜2016年冬版〜 - 2016/12/06
- れんこんサミットって何!?11月17日はレンコン記念日!今夜はレンコン料理で決まり!! - 2016/11/16