CSS カウンターを使用して数字の順序付きリストを美しく表示する方法

Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できるように、整理された方法でデータを表示することが非常に重要です。順序付きリストを使用すると、データを整理して表示するための簡単な方法になります。順序付きリスト番号のスタイルをより詳細に制御する必要がある場合は、 `html DOM`構造をさらに追加するか、 `JavaScript`を使用して制御する必要があることに気付くかもしれません。幸いなことに、この問題は`CSS計數器`を使用するとはるかに簡単に解決できます。このチュートリアルでは、 `CSS計數器`とは何か、そしていくつかの使用例について学習します。順序付きリストの問題次のような順序付きリストを記述すると、ブラウザはリスト項目の前に自動的に番号を追加します。 <オル> <li>私の最初のアイテム</li> <li>私の2番目のアイテム</li> <li>私の3番目のアイテム</li> </ol> 見た目は問題ありませんが、数字にスタイルを設定することはできません。リストの前にある数字を丸で囲んでリストを変更する必要がある場合、どうしますか? 1 つの方法は、リストを完全に削除し、自分で手動で番号を追加することです。 <div> <span>1</span> 私の最初のアイテム </div> <div> <span>2</span> 私の2番目のアイテム </div> <div> <span>3</span> 私の3番目のアイテム </div> div { 下マージン:10px; } div スパン { ディスプレイ:インラインフレックス; アイテムを中央揃えにします。コンテンツを中央揃えにする。幅:25px; 高さ:25px; 境界線の半径:50%; 背景色:#000; 色:#fff; } これはまさに私たちが達成したいことですが、いくつかの欠点もあります。まず、手動で数字を追加するのは面倒です。数字を変更する必要がある場合は、1つずつ変更する必要があります。この場合、 `JavaScript`を使用して`<span>`タグを動的に追加することでこれらの問題を解決できますが、これにより`DOM`にノードが追加され、大量のメモリが使用されることになります。ほとんどの場合、CSS カウンターを使用する方が適切です。理由を見てみましょう。 CSS カウンターの紹介 `CSS計數器`、 `CSS`ルールを使用して値を変更できるページスコープ変数です。まず、 `counter-reset`プロパティを使用してカウンターを設定します。 `list-number`ここで使用される変数名です。 div.list { カウンターリセット: リスト番号; } 次に、 `counter-increment`プロパティを使用してカウンターの値を増やします。 div.list div { カウンター増分: リスト番号; } これで、 `div.listdiv`要素が表示されるたびに、 `list-number`変数が 1 つずつ増加します。最後に、 `content`プロパティが設定された`:before`疑似要素と`counter()`関数を使用して数値を表示します。 div.list div:before { 内容: counter(リスト番号); } 完全なコードは次のとおりです。 <div class="list"> <div>私の最初のアイテム</div> <div>2 番目のアイテム</div> <div>私の3番目のアイテム</div> </div> div.list { カウンターリセット: リスト番号; } / :before 要素ではカウンタ増分を使用できます / div.list div:before { カウンター増分: リスト番号; 内容: counter(リスト番号); } 今はまだそこまでには至っていません。 `:before`疑似要素のスタイルを設定して、見栄えを良くしましょう。 div.list div:before { カウンター増分: リスト番号; 内容: counter(リスト番号); 右マージン: 10px; 下マージン:10px; 幅:35px; 高さ:35px; ディスプレイ:インラインフレックス; アイテムを中央揃えにします。コンテンツの中央揃え: 中央; フォントサイズ:16px; 背景色:#d7385e; 境界線の半径:50%; 色:#fff; } 開始番号を変更するデフォルトでは、 `counter-reset`カウンターを 0 に設定します。最初の`counter-increment`が呼び出されると、1 から始まります。 `counter-reset`関数の 2 番目の引数として整数を渡すことで、初期値を設定できます。 div.list { カウンターリセット: リスト番号 1; } `0`から開始したい場合は、初期値を`-1`に設定できます。 div.list { カウンターリセット: リスト番号 -1; } 増分値を変更するデフォルトでは、 `counter-increment`カウンターの値を 1 増加します。 `counter-reset`と同様に、 `counter-increment`プロパティのオフセット値を定義できます。この例では、 `counter-reset` `list-number`を`0`に設定します。 `counter-increment`が呼び出されるたびに、 `list-number` number は`2`ずつ増加するため、リスト番号`2` 、 `4` 、 `6`表示されます。 div.list { カウンターリセット: リスト番号; } div.list div:before { カウンター増分: リスト番号 2; // その他のスタイル } カウンター形式 `counter()`関数は、 `counter-name`と`counter-format` 2 つのパラメータを取ることができます。 2 番目の引数には、以下を含む任意の有効なリストタイプ値を使用できます。 `decimal` （例：1、2、3…） `lower-latin` （例：a、b、c…） `lower-roman` （例：i、ii、iii…）デフォルト値は数値です。たとえば、私のように科学的な知識を持っている場合は、数値に`lower-greek`文字を使用できます。 div.list div:before { カウンター増分: リスト番号; 内容: counter(リスト番号、小文字ギリシャ語); // ... その他のスタイル } ネストされたカウンターネストされた順序リストを使用する場合、数値は常に次の形式で表示されます。サブリスト項目に数値 (たとえば、1.1) が必要な場合は、 `counters()`関数を使用して`CSS計數器`を使用できます。 <オル> <li> 私の最初のアイテム <オル> <li>ネストされた最初のアイテム</li> <li>ネストされた 2 番目のアイテム</li> </ol> </li> <li>私の2番目のアイテム</li> </ol> オル { リストスタイルタイプ:なし; カウンターリセット:リスト; } ol li:前{ カウンター増分:リスト; コンテンツ: counters(リスト、 ".") ". "; } `counters()`関数の代わりに`counter()`関数を使用していることに注意してください。 `counters()`関数の 2 番目のパラメーターは接続文字列です。形式を設定するための 3 番目の引数 (ギリシャ数字やローマ数字など) を指定することもできます。タイトル付きのネストされたカウンター `<h1>` 、 `<h2>`などの要素はドキュメント内でネストされません。これらは異なる要素として表示されますが、階層を表します。タイトルにネストされた番号を設定する方法は次のとおりです。体 { カウンターリセット:h1; } h1 { カウンターリセット:h2; } h1:前{ カウンター増分: h1; コンテンツ: counter(h1) ". "; } h2:前{ カウンター増分:h2; コンテンツ: counter(h1) "." counter(h2) ". "; } `<h1>`が見つかるたびに、 `<h2>`カウンターがリセットされます。 `<h2>`には、ドキュメント内で`<h1>`を基準とした番号が与えられます。ブラウザのサポートありがたいことに、 `CSS`カウンターは`CSS2`で導入されて以来、幅広いブラウザーでサポートされるようになりました。コンテンツ以外のプロパティで`counter()`関数を使用することはまだ実験的ですが、このチュートリアルで説明するすべての例はためらうことなく実行できます。シンプルな挑戦 CSS カウンターを使った簡単なチャレンジに挑戦する準備はできていますか? `CSS計數器`を使用すると、わずか`10`行のコードで`1`から`1000`までをローマ字で表示できます。困惑している場合は、次の手順に従ってください。 `1000` `div`要素を作成するには、次のようにします。 (var i = 0; i < 1000; i++) の場合 { document.body.appendChild( document.createElement("div") ); } CSS カウンター: 体 { カウンターリセット:数値; } div:前{ カウンター増分:数値; 内容: counter(number) " => " counter(number, lower-roman); } 結論は CSS カウンターは CSS ではあまり知られていない機能ですが、それがどれほど頻繁に役立つかは驚くことでしょう。このチュートリアルでは、CSS カウンターをいつどのように使用するかについて説明し、いくつかの例を示しました。以下は使用するプロパティのリストです。

Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できるように、整理された方法でデータを表示することが非常に重要です。順序付きリストを使用すると、データを整理して表示するための簡単な方法になります。

順序付きリスト番号のスタイルをより詳細に制御する必要がある場合は、 html DOM構造をさらに追加するか、 JavaScriptを使用して制御する必要があることに気付くかもしれません。幸いなことに、この問題はCSS計數器を使用するとはるかに簡単に解決できます。

このチュートリアルでは、 CSS計數器とは何か、そしていくつかの使用例について学習します。

順序付きリストの問題

次のような順序付きリストを記述すると、ブラウザはリスト項目の前に自動的に番号を追加します。

<オル>
  <li>私の最初のアイテム</li>
  <li>私の2番目のアイテム</li>
  <li>私の3番目のアイテム</li>
</ol>

見た目は問題ありませんが、数字にスタイルを設定することはできません。リストの前にある数字を丸で囲んでリストを変更する必要がある場合、どうしますか?

1 つの方法は、リストを完全に削除し、自分で手動で番号を追加することです。

<div>
  <span>1</span> 私の最初のアイテム
</div>
<div>
  <span>2</span> 私の2番目のアイテム
</div>
<div>
  <span>3</span> 私の3番目のアイテム
</div>

div {
  下マージン:10px;
}
div スパン {
  ディスプレイ:インラインフレックス;
  アイテムを中央揃えにします。
  コンテンツを中央揃えにする。
  幅:25px;
  高さ:25px;
  境界線の半径:50%;
  背景色:#000;
  色:#fff;
}

これはまさに私たちが達成したいことですが、いくつかの欠点もあります。まず、手動で数字を追加するのは面倒です。数字を変更する必要がある場合は、1つずつ変更する必要があります。この場合、 JavaScriptを使用して<span>タグを動的に追加することでこれらの問題を解決できますが、これによりDOMにノードが追加され、大量のメモリが使用されることになります。

ほとんどの場合、CSS カウンターを使用する方が適切です。理由を見てみましょう。

CSS カウンターの紹介

CSS計數器、 CSSルールを使用して値を変更できるページスコープ変数です。

まず、 counter-resetプロパティを使用してカウンターを設定します。 list-numberここで使用される変数名です。

div.list {
  カウンターリセット: リスト番号;
}

次に、 counter-incrementプロパティを使用してカウンターの値を増やします。

div.list div {
  カウンター増分: リスト番号;
}

これで、 div.listdiv要素が表示されるたびに、 list-number変数が 1 つずつ増加します。

最後に、 contentプロパティが設定された:before疑似要素とcounter()関数を使用して数値を表示します。

div.list div:before {
  内容: counter(リスト番号);
}

完全なコードは次のとおりです。

<div class="list">
  <div>私の最初のアイテム</div>
  <div>2 番目のアイテム</div>
  <div>私の3番目のアイテム</div>
</div>

div.list {
  カウンターリセット: リスト番号;
}
/** :before 要素ではカウンタ増分を使用できます **/
div.list div:before {
  カウンター増分: リスト番号;
  内容: counter(リスト番号);
}

今はまだそこまでには至っていません。 :before疑似要素のスタイルを設定して、見栄えを良くしましょう。

div.list div:before {
  カウンター増分: リスト番号;
  内容: counter(リスト番号);
  
  右マージン: 10px;
  下マージン:10px;
  幅:35px;
  高さ:35px;
  ディスプレイ:インラインフレックス;
  アイテムを中央揃えにします。
  コンテンツの中央揃え: 中央;
  フォントサイズ:16px;
  背景色:#d7385e;
  境界線の半径:50%;
  色:#fff;
}

開始番号を変更する

デフォルトでは、 counter-resetカウンターを 0 に設定します。最初のcounter-incrementが呼び出されると、1 から始まります。 counter-reset関数の 2 番目の引数として整数を渡すことで、初期値を設定できます。

div.list {
  カウンターリセット: リスト番号 1;
}

0から開始したい場合は、初期値を-1に設定できます。

div.list {
  カウンターリセット: リスト番号 -1;
}

増分値を変更する

デフォルトでは、 counter-incrementカウンターの値を 1 増加します。 counter-resetと同様に、 counter-incrementプロパティのオフセット値を定義できます。

この例では、 counter-reset list-numberを0に設定します。 counter-incrementが呼び出されるたびに、 list-number number は2ずつ増加するため、リスト番号2 、 4 、 6表示されます。

div.list {
  カウンターリセット: リスト番号;
}
div.list div:before {
  カウンター増分: リスト番号 2;
  // その他のスタイル
}

カウンター形式

counter()関数は、 counter-nameとcounter-format 2 つのパラメータを取ることができます。 2 番目の引数には、以下を含む任意の有効なリストタイプ値を使用できます。

decimal （例：1、2、3…）
lower-latin （例：a、b、c…）
lower-roman （例：i、ii、iii…）

デフォルト値は数値です。

たとえば、私のように科学的な知識を持っている場合は、数値にlower-greek文字を使用できます。

div.list div:before {
  カウンター増分: リスト番号;
  内容: counter(リスト番号、小文字ギリシャ語);
  // ... その他のスタイル
}

ネストされたカウンター

ネストされた順序リストを使用する場合、数値は常に次の形式で表示されます。

サブリスト項目に数値 (たとえば、1.1) が必要な場合は、 counters()関数を使用してCSS計數器を使用できます。

<オル>
  <li>
     私の最初のアイテム
    <オル>
      <li>ネストされた最初のアイテム</li>
      <li>ネストされた 2 番目のアイテム</li>
    </ol>
  </li>
  <li>私の2番目のアイテム</li>
</ol>

オル {
  リストスタイルタイプ:なし;
  カウンターリセット:リスト;
}
ol li:前{
    カウンター増分:リスト;
    コンテンツ: counters(リスト、 ".") ". ";
}

counters()関数の代わりにcounter()関数を使用していることに注意してください。

counters()関数の 2 番目のパラメーターは接続文字列です。形式を設定するための 3 番目の引数 (ギリシャ数字やローマ数字など) を指定することもできます。

タイトル付きのネストされたカウンター

<h1> 、 <h2>などの要素はドキュメント内でネストされません。これらは異なる要素として表示されますが、階層を表します。タイトルにネストされた番号を設定する方法は次のとおりです。

体 {
  カウンターリセット:h1;
}
h1 {
  カウンターリセット:h2;
}
h1:前{
  カウンター増分: h1;
  コンテンツ: counter(h1) ". ";
}
h2:前{
  カウンター増分:h2;
  コンテンツ: counter(h1) "." counter(h2) ". ";
}

<h1>が見つかるたびに、 <h2>カウンターがリセットされます。 <h2>には、ドキュメント内で<h1>を基準とした番号が与えられます。

ブラウザのサポート

ありがたいことに、 CSSカウンターはCSS2で導入されて以来、幅広いブラウザーでサポートされるようになりました。コンテンツ以外のプロパティでcounter()関数を使用することはまだ実験的ですが、このチュートリアルで説明するすべての例はためらうことなく実行できます。

シンプルな挑戦

CSS カウンターを使った簡単なチャレンジに挑戦する準備はできていますか?

CSS計數器を使用すると、わずか10行のコードで1から1000までをローマ字で表示できます。

困惑している場合は、次の手順に従ってください。

1000 div要素を作成するには、次のようにします。

(var i = 0; i < 1000; i++) の場合 {
  document.body.appendChild( document.createElement("div") );  
}

CSS カウンター:

体 {
  カウンターリセット:数値;
}
div:前{
  カウンター増分:数値;
  内容: counter(number) " => " counter(number, lower-roman);
}

結論は

CSS カウンターは CSS ではあまり知られていない機能ですが、それがどれほど頻繁に役立つかは驚くことでしょう。このチュートリアルでは、CSS カウンターをいつどのように使用するかについて説明し、いくつかの例を示しました。

以下は使用するプロパティのリストです。

財産	使用法
カウンターリセット	指定された値カウンターをリセット（または作成）します（デフォルトは 0）
カウンター増加	指定されたカウンタを指定されたオフセット分増加します（デフォルトは1）
カウンター(カウンター名, カウンター形式)	指定された形式でカウンターの値を取得します
カウンター(カウンター名、カウンター文字列、カウンター形式)	指定された形式でネストされたカウンターの値を取得します

CSS カウンターはクールです。ただし、理解しておくべきことの 1 つは、すべてのカウンターがグローバルであるということです。多数の CSS ファイルを含む大規模なプロジェクトで作業している場合、CSS ファイルが作成、リセット、増分される場所が見つからないことがあります。過度に使用せず、競合を避けるためにカウンターには説明的な名前を使用するようにしてください。

いくつかの実例

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>CSS カウンター</title>
  <スタイル>
    html{
      ボックスのサイズ: 境界線ボックス;
      フォントサイズ: 62.5%;
    }

    *、
    *：：前に、
    *：後 {
      ボックスサイズ: 継承;
    }

    体 {
      フォントファミリー: Rambla、サンセリフ;
      フォントサイズ: 2rem;
      行の高さ: 1.5;
      色: #03c03c;
    }

    h1 {
      テキスト配置: 中央;
    }

    .ラッパー{
      マージン: 0 自動;
      幅: 85%;
      ディスプレイ: -webkit-box;
      ディスプレイ: -webkit-flex;
      ディスプレイ: -ms-flexbox;
      ディスプレイ: フレックス;
      コンテンツの位置を揃える
      -ms-flex-pack: 配布します。
      コンテンツの両端揃え: スペースを空ける;
    }

    @media (最大幅: 1100px) {
      .ラッパー{
        -webkit-box-orient: 垂直;
        -webkit-box-direction: 通常;
        -webkit-flex-direction: 列;
        -ms-flex-direction: 列;
        flex-direction: 列;
        -webkit-box-align: 中央;
        -webkit-align-items: 中央;
        -ms-flex-align: 中央;
        アイテムの位置を中央揃えにします。
      }
    }

    オル {
      カウンターリセット: li;
      マージン: 20px 0;
      左パディング: 0;
    }

    ol>li {
      位置: 相対的;
      マージン: 0 0 25px 2em;
      パディング: 4px 8px 4px 20px;
      リストスタイル: なし;
    }

    ol>li::before {
      コンテンツ: カウンター(li);
      カウンター増分: li;
      位置: 絶対;
      上: -2px;
      左: -2em;
      幅: 2em;
      右マージン: 8px;
      パディング: 4px;
      フォントの太さ: 太字;
      テキスト配置: 中央;
    }

    li ol、
    li ul {
      上マージン: 6px;
    }

    ol ol li:最後の子 {
      下マージン: 0;
    }

    .disc>li::before {
      色: 白;
      背景色: #03c03c;
      境界線の半径: 50%;
    }

    .circle>li::before {
      色: #03c03c;
      境界線: 実線 2px #03c03c;
      境界線の半径: 50%;
    }

    .angle>li::before {
      色: #03c03c;
      右境界線: 実線 3px #03c03c;
      下部境界線: 実線 3px #03c03c;
    }

    .shadow>li::before {
      色: 白;
      背景: #03c03c;
      ボックスの影: 5px 5px 0 0 緑黄色;
    }

    .rombo>li {
      下部マージン: 25px;
    }

    .rombo>li::before {
      色: 白;
      zインデックス: 2;
    }

    .rombo>li::after {
      位置: 絶対;
      上: -2px;
      左: -2em;
      幅: 2em;
      右マージン: 8px;
      パディング: 4px;
      背景色: #03c03c;
      高さ: 2em;
      -webkit-transform: 回転(45度)。
      -ms-transform:回転(45度);
      変換: 回転(45度);
      コンテンツ： '';
      zインデックス: 1;
    }

    .underline>li::before {
      下部境界線: 実線 3px #03c03c;
    }
  </スタイル>
</head>

<本文>
  <h1>順序付きリスト番号のスタイル設定</h1>
  <div class="wrapper">
    <ol class="disc">
      <li>トマト</li>
      キュウリ
      <li>タマネギ</li>
      <li>コショウ</li>
    </ol>
    <ol class="circle">
      <li>トマト</li>
      キュウリ
      <li>タマネギ</li>
      <li>コショウ</li>
    </ol>
    <ol class="角度">
      <li>トマト</li>
      キュウリ
      <li>タマネギ</li>
      <li>コショウ</li>
    </ol>
    <ol class="shadow">
      <li>トマト</li>
      キュウリ
      <li>タマネギ</li>
      <li>コショウ</li>
    </ol>
    <ol class="rombo">
      <li>トマト</li>
      キュウリ
      <li>タマネギ</li>
      <li>コショウ</li>
    </ol>
    <ol class="underline">
      <li>トマト</li>
      キュウリ
      <li>タマネギ</li>
      <li>コショウ</li>
    </ol>
  </div>
  その他の例
</本文>
</html>

さらに優れた事例

https://css-tricks.com/custom-list-number-styling/

CSS カウンターを使用して番号付きリストを美しくする方法についての記事はこれで終わりです。番号付きリストの CSS カウンターの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Linux の一般的なコマンドとショートカットキーの紹介

>>: HTMLページでチェックボックスを操作する方法