リスト表示で自動連番したいとき、olタグを使用しますが、並べた順に単にに数字がふられるだけです(【サンプル01】)。これをカテゴリーで分けたり、補足的な説明を加えたりする場合、counter()関数が便利です。【サンプル02】は、olタグにcounter()関数を使用して、リストに補足的な表現を加え、二つに分類して表示しています。

定義リストにcounter()関数を使用した「CSS contentプロパティのcounter()を使い、cssのみで自動連番(1)

【サンプル01】olタグを使ったリストの自動連番

  1. ネットビジネスの動向全般
  2. ネットユーザーの行動変化
  3. Eコマースと決済プラットフォームの動向
  4. クラウドソーシングとネットビジネス
  5. データセンター事業者の課題
  6. 国内通信事業者のインフラの動向
  7. 国内通信事業者の資金調達

【サンプル02】counter()関数を用いて、リストのカテゴリー分け自動連番

  1. ネットビジネスの動向全般
  2. ネットユーザーの行動変化
  3. Eコマースと決済プラットフォームの動向
  4. クラウドソーシングとネットビジネス
  1. データセンター事業者の課題
  2. 国内通信事業者のインフラの動向
  3. 国内通信事業者の資金調達

【サンプル02】のCSSソース

.count li,.count2 li {
  list-style: none;
  margin-left:0;
  counter-increment: renban;
}
.count2 li {
  counter-increment: renban2;
}
.count li:before {
  content : "提出済の報告書 第" counter(renban) "項目:";
  padding-right: 12px;
  color:blue;
} 
.count2 li:before {
  content : "未提出の報告書 第" counter(renban2) "項目:";
  padding-right: 12px;
  color:purple;
}
戻るボタン