CSSカウンターの概要

序章

プログラミングでは、 counters は、カスタマイズ可能なルールに従って増分する値を保持する変数です。ループが実行された回数を保存することにより、ループのタブを維持するのに役立つなど、多くの目的があります。プログラミング言語では日常的に使用されていますが、カウンターは従来、カスケードスタイルシート（CSS）の構文に含まれていませんでした。最新のCSSの時代以前は、スタイルの目的でページ上の要素を追跡することは、マークアップで手動で行うか、JavaScriptを使用して集計することで行われました。しかし現在、CSSには、JavaScriptなしで増分を追跡できる十分にサポートされたcounterプロパティがあります。

このチュートリアルでは、CSSカウンターを使用して、ハイパーテキストマークアップ言語（HTML）ドキュメントのsection要素に番号を付け、table要素の行数を集計することでCSSカウンターの基本を実行します。。

前提条件

選択したWebブラウザからアクセスできるindex.htmlとしてローカルマシンに保存されたHTMLファイル。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

ページのセクションの番号付け

CSSでカウンターがどのように機能するかを示すために、最初にスタイルシートを使用して、HTML内の複数のsection要素に数値を付加します。カウンターを使用して、新しいセクションごとに番号を1ずつ増やします。

まず、選択したテキストエディタを使用して、index.htmlファイルを開きます。このチュートリアルでは、nanoを使用します。

nano index.html

ファイルが開いたら、次のHTMLを追加して、Webサイトのセマンティック構造を作成します。この例では、爬虫類に関する情報シートです。

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Introduction to CSS Counters</title>
    <link rel="stylesheet" type="text/css" href="counter.css">
  </head>

  <body>
    <section>
      <h2>Ratings</h2>
      Insert a table with reptile ratings on it...
    </section>

    <section>
      <h2>Alligators</h2>
      Insert facts about alligators here...
    </section>

    <section>
      <h2>Turtles</h2>
      Insert facts about turtles here...
    </section>

    <section>
      <h2>Snakes</h2>
      Insert facts about snakes here...
    </section>
  </body>

</html>

このコードでは、section要素を使用して、h2見出しとして設定されたタイトルでサイトの4つのセクションを作成しました。また、CSSファイルcounter.cssに接続するheadにlink要素を追加しました。これはまもなく作成されます。

ファイルを保存して閉じます。ブラウザでindex.htmlを開くと、次のように表示されます。

このHTMLの各sectionに番号を付ける場合は、次のように、各h2の前にマークアップの番号を付けることができます。

...
    <section>
      <h2>1. Ratings</h2>
      Insert a table with reptile ratings on it...
    </section>

    <section>
      <h2>2. Alligators</h2>
      Insert facts about alligators here...
    </section>
...

セクションの数が少ない場合は優れたソリューションですが、セクションの数が数十または数百の場合、これは面倒でエラーが発生しやすくなります。さらに、セクションを並べ替える必要がある瞬間に、複雑さがすぐに悪化します。

この番号付けを自動化するために、CSSカウンターを使用できます。

index.htmlと同じディレクトリにcounter.cssファイルを作成して開きます。

nano counter.css

CSSのカウンターは、従来のプログラミング言語の変数のように動作します。 CSSカウンターを使用するための最初のステップは、カウンターを初期化することです。これにより、カウンターに名前が付けられ、初期値が設定されます。

次のコードをファイルに追加します。

counter.css

body {
  counter-reset: sectionCounter;
}

このコードでは、counter-resetを使用して、sectionCounterという名前のカウンターを初期化しました。この時点で、sectionCounterは0と等しくなります。

カウンター名の後にcounter-resetプロパティに整数を渡すことにより、初期化された値を明示的に宣言できます。たとえば、counter-reset: sectionCounter 2は、sectionCounterカウンターを2の値で初期化します。整数値が指定されていない場合、カウンタ値はデフォルトで0です。

カウンターを初期化したので、カウンターの増分方法を設定できます。セクションごとに、カウンターを1ずつインクリメントする必要があります。これを行うには、次の強調表示されたコードを追加します。

counter.css

body {
  counter-reset: sectionCounter;
}

section {
  counter-increment: sectionCounter;
}

このコードでは、すべてのsection要素を選択して、counter-incrementプロパティを設定しました。これは、CSSがsection要素に遭遇するたびに、カウンターをインクリメントすることを意味します。プロパティをsectionCounterに設定すると、sectionCounterという名前のカウンターをインクリメントすることを選択します。デフォルトでは、カウンターは1ずつ増加しますが、増加を指定する場合は、空白で区切られたsectionCounterの後に整数を追加できます。

カウンターが初期化され、インクリメントロジックが設定されると、カウンターを使用できるようになります。カウンターの値を使用するには、contentプロパティを使用して、値を見出しh2の前に追加します。

counter.css

body {
  counter-reset: sectionCounter;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

:: before pseudo-element を使用して、各h2見出しの前に要素を追加しました。新しい要素の内容を設定するには、contentプロパティをcounter()関数と組み合わせて使用しました。この関数は、sectionCounterの値を文字列として返します。 2番目の文字列をcontentに渡すと、文字列が連結されるため、sectionCounterの値に続いて、.とスペースが出力されます。

ファイルを保存して閉じます。 Webブラウザーを更新すると、次のようなセクション見出しが表示されます。 1.1。評価と 2.2。ワニ：

それがすべてではありません; カウンターは、新しいセクションの追加と削除、およびそれらの並べ替えに影響されないため、順序を変更した場合に番号を付け直す必要はありません。

これを試すには、HTMLファイルを開きます。

nano index.html

TurtlesセクションとSnakesセクションの順序を切り替えます。

index.html

...
  <body>
    <section>
      <h2>Ratings</h2>
      Insert a table with reptile ratings on it...
    </section>

    <section>
      <h2>Alligators</h2>
      Insert facts about alligators here...
    </section>

    <section>
      <h2>Snakes</h2>
      Insert facts about snakes here...
    </section>

    <section>
      <h2>Turtles</h2>
      Insert facts about turtles here...
    </section>

  </body>
...

ファイルを保存して閉じます。ブラウザをリロードすると、次のようになります。

このセクションでは、CSSカウンターを使用して、HTMLドキュメントの番号付きセクションを自動化しました。次に、table要素を使用した例を実行して、合計計算にカウンターを使用する方法を示します。

テーブルの行数を数える

HTMLドキュメントの番号付けを自動化することに加えて、定期的なインクリメントを伴うすべてのタスクにCSSカウンターを使用できます。これを示すために、カウンターを使用してテーブル要素に行数を格納し、テーブルに合計を表示します。

tableの行数、つまりtr要素のカウントは、チュートリアルの前の部分で各section要素に数値を追加した方法と似ています。大きな違いは、重要な部分は各行の値ではなく、合計値であるということです。

tableの行を集計する前に、tableを操作する必要があります。 HTMLファイルを開きます。

nano index.html

次に、次の強調表示された行を追加して、 Ratings sectionにテーブルを作成します。

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Introduction to CSS Counters</title>
    <link rel="stylesheet" type="text/css" href="counter.css">
  </head>

  <body>
    <section>
      <h2>Ratings</h2>
      <table border="1" cellpadding="5">
        <thead>
          <tr>
            <th>Reptile</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alligator</td>
            <td>9001</td>
          </tr>
          <tr>
            <td>Turtle</td>
            <td>223</td>
          </tr>
          <tr>
            <td>Snake</td>
            <td>3.14</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Rows</th>
            <th class="total"></th>
          </tr>
        </tfoot>
      </table>
    </section>

    <section>
      <h2>Alligators</h2>
      Insert facts about alligators here...
    </section>
...

table要素を使用してテーブルを作成し、tr要素を使用してテーブルの行を決定し、td要素を使用して行をデータポイントで埋めました。 thead、tbody、およびtfootの使用に注意してください。必須ではありませんが、これらの要素は行をセマンティックセクションにグループ化します。これを使用して、tbodyセクションの行をより適切にターゲティングし、ヘッダーまたはフッターの行を省略できます。最後に、border属性とcellpadding属性を使用して、テーブルに基本的なスタイルを設定しました。

index.htmlを保存して終了します。ブラウザでページを更新すると、次のように表示されます。

次に、CSSファイルを開きます。

nano counter.css

前と同じように、ゼロ値でカウンターを開始する必要があります。ただし、今回は、rowCounterという名前の新しいカウンターを追加します。

counter.css

body {
  counter-reset: sectionCounter;
  counter-reset: rowCounter;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

tbodyの各行、またはtr要素について、カウンターをインクリメントします。

counter.css

body {
  counter-reset: sectionCounter;
  counter-reset: rowCounter;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

table tbody tr {
  counter-increment: rowCounter;
}

table tbody trセレクターを使用してtbodyのすべてのtr要素を選択し、次にcounter-incrementプロパティを使用しましたが、今回は[ X147X]カウンター。

最後に、totalのクラスを持つ列のフッターにカウンターの最終値を追加します。

counter.css

body {
  counter-reset: sectionCounter;
  counter-reset: rows;
}

section {
  counter-increment: sectionCounter;
}

h2::before {
  content: counter(sectionCounter) ". ";
}

table tbody tr {
  counter-increment: rowCounter;
}

table .total::before {
  content: counter(rowCounter);
}

以前と同様に、::before疑似要素を使用して、rowCounterの値を新しい文字列として追加しました。これはカウントがインクリメントされた後に宣言されるため、行の総数が報告されます。

CSSファイルを保存して終了し、ブラウザでページをリロードして、次のように表示します。

これで、tableは常に含まれる行数を報告します。マークアップに行を追加または削除すると、合計が更新されます。これは、JavaScriptを使用してDOMを操作する場合でも機能します。

結論

CSSのカウンターは、HTMLの特定の要素で増分する値を表示するのに役立ちます。多くの場合、これによりJavaScriptをページに導入する必要が完全になくなり、対話性を必要としない軽量のWebプロジェクトに理想的なソリューションになります。ただし、このようにCSSを使用すると、コンテンツとデザインの境界があいまいになり、より大きなアプリを管理しやすくする方法で懸念事項が分離されないことに注意してください。このため、より複雑なJavaScriptアプリケーションではこの方法を避けることをお勧めします。

ウェブサイトのスタイリングについて詳しく知りたい場合は、HTMLを使用してウェブサイトを構築する方法シリーズまたはReactコンポーネントのスタイリング方法に関するチュートリアルをご覧ください。