0Pricing
CSS Academy · レッスン

::beforeを使ったCSSカウンター

CSSカウンターとcounter()関数を使って、自動的な番号付けの仕組みを作成します。

「::beforeを使ったCSSカウンター」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

CSSカウンターとは

CSSカウンターは、CSSが管理する変数です。値を増加させて生成コンテンツに表示できます。JavaScriptやHTMLでの手動の番号管理を使わずに、自動的な番号付けを実現できます。

counter-reset

counter-resetはカウンターを初期化またはリセットします。数える項目を含む要素に設定してください。

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-incrementは、適用されるたびにカウンターを1（デフォルト値）増加させます。繰り返される各項目に設定してください。

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

content内のcounter()関数

擬似要素のcontentプロパティでcounter(name)を使用すると、現在のカウンター値を表示できます。

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

スタイル付きステップカウンター

JavaScriptを使わずに作成する、番号付きステップコンポーネントの完全な例です。

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

カウンターの初期値

counter-resetで任意の開始番号を設定します。

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

カウンターのスタイル

counter()の2番目の引数を使用して、リストのスタイル種別を指定します。

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

counters()による入れ子のカウンター

counters(name, separator)（末尾に「s」が付きます）を使うと、「1.1」、「1.2」、「2.1」のような入れ子の番号を作成できます。

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

入れ子のリストでのリセット

入れ子になった各olはカウンターのスコープを継承します。counters()関数はカウンターのチェーン全体を自動的に使用します。

セクション番号

長いドキュメントの見出しに自動で番号を付けます。

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

カウンターによる目次

CSSカウンターは、以前は目次や書式設定されたドキュメントに使用されていました。現在はJavaScriptフレームワークで処理することが多くなっていますが、CSSカウンターはCSSだけで実現できる選択肢として残っています。

確認問題

一致する各要素でCSSカウンターを増分するプロパティはどれですか？

まとめ

CSSカウンターを使うと、JavaScriptなしで自動的な番号付けを実現できます。コンテナーにcounter-resetを設定し、繰り返される項目にcounter-incrementを設定します。そして、擬似要素のcontentでcounter(name)を使って値を表示します。counters()を使うと、区切り文字付きの入れ子の番号付けに対応できます。

よくある質問

「::beforeを使ったCSSカウンター」レッスンは無料ですか？

はい。「::beforeを使ったCSSカウンター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「::beforeを使ったCSSカウンター」で何を学びますか？

CSSカウンターとcounter()関数を使って、自動的な番号付けの仕組みを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「::beforeを使ったCSSカウンター」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ::beforeと::afterのコンテンツ
  2. ::placeholder、::selection、::marker
  3. ::beforeを使ったCSSカウンター
  4. 疑似要素による装飾パターン
← CSS Academyに戻る