HTML&CSS連番を付けたいときに使用するol要素。数字の部分を自由に装飾したい!というときのためのメモ。記述まずは通常のolリストの記述。とまあこんな感じです。ここの数字の部分を装飾したい。出力される連番を非表示にせっかくの連番ですが、いったん非表示にしちゃいます。number;のところで、カウンターのリセットをします。numberというカウンターを使いますよ、という感じですので、ここのところには好きな名前を付けてください。カウンターは0になります。ついでにpaddingとmarginも0にして字下げをリセットしておきます。none;で元々のナンバリングを非表示にしておきます。プロパティを使用して連番を取得する続いてリストでカウンターの処理と表示をします。5px;}カウンターはリスト(li)のbefore要素に出力します。number;でカウンターの数字を1進めます。counter(number);でカウンターの数字を表示します。ここまでがカウンターの使い方。あとはli::beforeを好きなようにCSSで装飾すればOKです。リストを入れ子にするときはこのカウンターはさらに入れ子でも使えます。";のところでcountersというプロパティを使用しています。これだけで入れ子にも対応できるのはすごいですね!さらにリストだけじゃなくて他の要素のカウンターとしても使用できます。counter()自体はcontentプロパティにしか出力できないようです。変数みたいに使えたら便利なんですけどそういうのはjsとかでやりなさいってことですね~。leaf関連記事XAMPPでHTMLファイル内でPHPを使えるようにするすっかりご無沙汰しております。おかげさまで何件かお仕事をさせていただいたりと夏は忙しくしていました。ブログも忘れないうちに更新したい...記事を読む【CSS】floatの動作とclearfixをおさらい最近はflexboxという超便利なプロパティがあるので複雑なことにはだんだん利用されなくなってきそうなfloat。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。