【CSS】counterを利用した自動ナンバリング - 静岡県藤枝市のデザインスタジオ・エフ
最近は、CSSというとCSS3にクローズアップされることが多いのですが、今回は、CSS2より追加された「counter（カウンタ）」の着目してみました。 CSSの「counter（カウンタ）」を使用すると連番などの自動ナンバリングの機能を実装することができます。 「1」「2」「3」「4」のような一般的なナンバリングをはじめ、「1.1.」「1.2.」「1.3.」「2.1.」のような章や節を表す形での実装、さらには「第1章」「第2章」「第3章」という書き出しをつけることができます。 さまざまな用途に応用ができそうな機能ですね。 「counter（カウンタ）」は、すべての要素において:before 擬似要素及び:after 擬似要素に当てた content プロパティで実装することができます。 ※IE8よりサポート、IE6, 7は未サポート さっそくサンプルを作りながら実装方法をまとめてみます。
[CSS]olの番号に括弧を付けてみた。正確にはolの番号に括弧は付けれらないよね。 | Maku_zin Ver2.1.1
どうも下山です。 忙しくなるとこのブログの存在を忘れるのが特技です。 いえ、特技と言うほどのものではありません。 今回はol、段落番号に括弧をつけてやろうとやっきになってアーデモナイコーデモナイってやった挙句のまとめです。 html sassSee the Pen LpGzzy by mitsuki sagayama (@sagayama) on CodePen. sassそのままだと見慣れない方もいると思うからcssにコンパイルすると↓ ol li { list-style-type:none; counter-increment:cnt; } ol li:before { content:"(" counter(cnt) ")"; margin-right:0.5em; }それでは見慣れないプロパティもありますので解説していきます。 counter-incrementって？counte
![[CSS]olの番号に括弧を付けてみた。正確にはolの番号に括弧は付けれらないよね。 | Maku_zin Ver2.1.1](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2e1b90f4e81d4ab5fa95a28be5f40e77fb42b2b/height=288;version=1;width=512/https%3A%2F%2Fmakurazaki.org%2Fsystem%2Fwp-content%2Fuploads%2F2022%2F01%2Flogo2.png)
counter-reset－スタイルシートリファレンス
counter-resetプロパティは、要素の連番（カウンタ）の値をリセットする際に使用します。 counter-resetプロパティを適用した要素が現われるたびに、指定した名前のカウンタの値が0にリセットされます。 また、カウンタ名の後にスペース区切りで整数値を指定すると、カウンタの値がその数にリセットされます。 ■値 none カウンタの値をリセットしない（初期値） カウンタ名 指定した名前のカウンタの値が0にリセットされる カウンタ名 整数値 半角スペースで区切って整数値を指定すると、カウンタの値がその数にリセットされる スタイルシート部分は外部ファイル（sample.css）に記述。 dt.sample1:before { counter-increment:sample; content:counter(sample) "位 "; } h3 {counter-reset:samp
[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm（プラズム）
あれ？どうやるんだっけな？となるコトが多いので、勉強がてら記事に。 olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。 ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。 と思って、さあ、CSSで装飾や！ってなっても、あれolの数字って、どうやって弄ったらいいんだ？list-style？？みたいになります。 じゃあ、本腰入れてolの数字をカスタマイズしてやろう！と、イマココって感じです。 olとは？まずはolってなによ？という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。 <ol> <li>こんな</li> <li>感じで</li> <li>数字付き！</li> </ol> こんな感じで数字付き！といった具合に。 ブログやサイトのUIを作
![[CSS] olの数字をCSSでいい感じに装飾する方法 * prasm（プラズム）](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ec25bc5d348bff15cecd1f10494d9e4a89909e3/height=288;version=1;width=512/https%3A%2F%2Fprasm.blog%2Fwp-content%2Fuploads%2F2013%2F12%2Fcss-ol-list.jpg)
【CSS】番号付きリスト「ol」を途中から始めたり並び順を逆にしたりする方法 - ディレイマニア
番号付きリストの「ol」を使う場合、普段は1から順に番号を振ることが多いですが、稀に途中から順番に数字を振りたい場合もありますよね。 例えばランキング圏外のものを10個紹介する際に11～20位を表示させたい、といったケースもあるでしょう。 というわけで、任意の数字から始めるための書き方と、ついでに並び順を逆にする方法もご紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - counter-increment example