日本語

Tutorial CSS

Tutorial CSS3

CSS Avanzato

Riferimenti CSS

CSS Reattivo

CSSカウンタ:ウェブページに秩序をもたらす

こんにちは、未来のウェブデザインの魔法使いさんたち！今日は、CSSカウンタの魅力的な世界に飛び込んでみましょう。近所の親切なコンピュータ教師として、あなたたちをこの旅に案内することを楽しみにしています。信じてください、このチュートリアルが終わる頃には、プロのように要素を数えることができるでしょう！

CSS - Counters

CSSカウンタとは？

大きなパーティを計画しているとします（私がフルタイムのコード愛好家になる前の日々を思い出します）。ゲストが席を見つけやすくするために、すべてのテーブルに番号を振りたいです。CSSカウンタは、ウェブページ上の要素を自動で番号付けるデジタルなパーティーアシスタントのようなものです。すごい吧？

簡単な例から始めましょう：

body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
<h2>導入</h2>
<h2>本文</h2>
<h2>結論</h2>

この例では、CSSに以下を指示しています：

  1. ボディの開始位置で「section」というカウンタを開始します。
  2. <h2>タグが見つかるたびにこのカウンタをインクリメントします。
  3. 各<h2>の前に「Section X: 」を追加します。Xは現在のカウントです。

結果はどうなるか？<h2>タグが自動的に「Section 1: 導入」、「Section 2: 本文」と番号付けされます。魔法のようですが、あなたが魔术師です！

CSSカウンタ - カウンタのネスティング

次に、もっと高度なことをやみましょう。テキストブック（または非常に長いチュートリアル）を書いていて、節が必要な場合を考えます。CSSカウンタはあなたをサポートします！

body {
counter-reset: chapter;
}

h1 {
counter-reset: section;
}

h1::before {
counter-increment: chapter;
content: "Chapter " counter(chapter) ". ";
}

h2::before {
counter-increment: section;
content: counter(chapter) "." counter(section) " ";
}
<h1>CSSの始め方</h1>
<h2>CSSとは？</h2>
<h2>CSSの構文</h2>
<h1>高度なCSS技術</h1>
<h2>Flexbox</h2>
<h2>Grid</h2>

このコードは、ネストされたカウンタ構造を作成します。新しい章（h1）に達するたびに「section」カウンタをリセットします。結果は以下のようになります：

Chapter 1. Getting Started with CSS 1.1 What is CSS? 1.2 CSS Syntax Chapter 2. Advanced CSS Techniques 2.1 Flexbox 2.2 Grid

小さな、見えない図書館司書がコンテンツを整理しているかのようです！

CSSカウンタ - 逆カウント

時々、逆に数えたい場合があります。大きなイベント（新しいCSS仕様のリリースなど）までのカウントダウンを作成しているかもしれません。CSSは「counter-increment」プロパティでそれをサポートします：

ol {
counter-reset: my-awesome-counter 5;
}

li {
counter-increment: my-awesome-counter -1;
}

li::before {
content: counter(my-awesome-counter) ") ";
}
<ol>
<li>ロケットを打ち上げる</li>
<li>パラシュートを展開する</li>
<li>安全に着陸する</li>
<li>祝う</li>
<li>CSSを書く</li>
</ol>

これでカウントダウンリストが作成されます：

  1. ロケットを打ち上げる
  2. パラシュートを展開する
  3. 安全に着陸する
  4. 祝う
  5. CSSを書く

なぜなら、CSSを書くことはいつも最終目標です！

文法

CSSカウンタの文法を分解してみましょう。心配しないでください、祖母の秘密のレシピを解読するよりも簡単です！

プロパティ 説明 例
counter-reset カウンタを初期化またはリセット counter-reset: my-counter 0;
counter-increment カウンタをインクリメントまたはデクリメント counter-increment: my-counter 1;
counter() カウンタの現在値を返す content: counter(my-counter);
counters() ネストされたカウンタを結合 content: counters(my-counter, ".");

CSSカウンタ - 関連プロパティ

CSSカウンタを最大限に活用するために、以下の関連プロパティを理解する必要があります：

  1. content: 魔法が起こる場所です。カウンタ値を表示するために使用します。
li::before {
content: counter(item) ". ";
}
  1. list-style-type: カウンタとは直接関連していませんが、カウンタと組み合わせて非常にクールな効果を得ることができます。
ol {
list-style-type: none;
}
  1. ::beforeと::afterの擬似要素: カウンタと一緒に働くあなたの最良の友達です。要素の前後にコンテンツを追加することができます。
h2::before {
content: "Section " counter(section) ": ";
}

練習は完璧を生みます！これらのプロパティをさまざまな方法で組み合わせて試してみてください。誰 knows? 次のウェブデザインの大発見を発明するかもしれません！

結論として、CSSカウンタは構造化されたコンテンツを作成する際に時間と労力を節約できる強力なツールです。小さなロボットたちがページを番号付けしてくれるかのようです。そして、最高な部分は、彼らが疲れたりコーヒーブレイクを求めたりしないことです！

それでは、恐れずに数え、あなたのカウンタが常にあなたの意向に従うことを祈っています！

Credits: Image by storyset

前のチュートリアル:
CSS - ボックスモデル
次のチュートリアル:
CSS - クリップ