2019年06月1日(土)
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result
See the Pen Overlapping CSS Counters by kachibito
(@kachibito) on CodePen.
自動連番できるCSSカウンターを親要素と子要素の入れ子で2つ使う、みたいなやつ
異なるコンテナに含まれる同一要素に自動でナンバリングします結論から言うと、複数のカウンター名を使えるのでそのまま使えば動作します
css
body {/*sectionsとboxesの2つのカウンター名を設定して初期化*/ counter-reset: sections boxes; } /*親要素のカウンター*/ section { counter-increment: sections; } section::before {/*数字に接頭語を付与*/ content: 'その' counter(sections); } /*子要素のカウンター*/ .box { counter-increment: boxes; } .box::before { content: counter(boxes, decimal-leading-zero); } ...
0
0
7
24author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル』についてまとめています。
この記事は特にレスポンシブ・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
