CSS カウンター | ネストされたリストのカスタマイズ

はじめに

この実験では、CSS カウンターを使ってカスタムなリストカウンターを作成する方法を探ります。具体的には、カウンター変数を初期化してインクリメントする方法と、counters() 関数を使ってこれらの変数の値を表示する方法を学びます。この実験が終わると、CSS を使ってネストされたリストカウンターを作成し、リスト要素の外観をカスタマイズできるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

カウンター

VM 内には既に index.html と style.css が用意されています。

ネストされたリスト要素を考慮したカスタムなリストカウンターを作成するには、次の手順に従います。

counter-reset を使って、変数カウンターを初期化します（初期値は 0）。名前は属性の値になります（例：counter）。
各カウント可能な要素（例：各 <li>）に対して、変数カウンターに counter-increment を適用します。
各カウント可能な要素（例：各 <li>）の ::before 疑似要素の content の一部として、各変数カウンターの値を表示するために counters() を使います。渡される 2 番目の値（'.'）は、ネストされたカウンターの区切り文字として機能します。

以下は、HTML のコード例です。

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

そして、カスタムなリストカウンターを適用する CSS コードは以下の通りです。

ul {
  counter-reset: counter;
  list-style: none;
}

li::before {
  counter-increment: counter;
  content: counters(counter, ".") " ";
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはカウンターの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

CSS を使ったネストされたリストカウンター

はじめに

カウンター

まとめ