ＣＳＳでカウンターの設置

概要：リストや表、箇条書き等で行の入れ替えや出入りが多い場合、連続番号を訂正しなくても、自動的に連番を設定するＣＳＳカウンタの事例です。

事例１：Ｐタグで羅列した箇条書きタイプ

ＨＴＭＬ
<div class="kn_p_order" style="width: 100%;">
<div>女子プロゴルフ 　賞金ランキングベスト５</div>
<div>　2019年ー月ー日現在</div>
<p>鈴木愛　16,019万円　出身地：徳島県三好郡　生年：1994年</p>
<p>澁野日向子　15,261万円　出身地：岡山県岡山市　生年：1998年</p>
<p>申ジエ&nbsp; 14,227万円　出身地：韓国・全羅道 　生年：1988年</p>
<p>ペ・ソンウ&nbsp; 12,755万円　出身地：韓国・ソウル市 　生年：1994年</p>
<p>イン・ミニョン&nbsp; 10,576万円　出身地：韓国　生年：1992年</p>
</div>

ＣＳＳ
 .kn_p_order > div{                 /* カウンタ設置 */
  counter-reset:ctr 0;                /* 名前付、初期値 */
  font-weight:bold;
  text-align:center;
}
.kn_p_order p:nth-of-type(n+1){    /* ｐの最初から最後迄 */
  counter-increment:ctr;              /* カウンタに＋１ */
}
.kn_p_order
  p:nth-of-type(n+1)::before{      /* ｐの最初から最後迄 */
  content:"第"counter(ctr)"位 ";      /* カウンタ値表示 */
  margin-right:1em;
}
  

事例２：ｔａｂｌｅタグで作成した表タイプ

表の列数と列幅に自由に対応できる汎用型テーブルの事例です。

＊＊＊＊＊＊　以下が表示の事例　＊＊＊＊＊＊

ＨＴＭＬ
<table class="kn_tbl_order kn_tbl_col">
  <tbody>
  <tr>
    <td>順位</td><td>名前</td><td>賞金</td><td>出身地</td><td>生年</td>
  </tr>
  <tr>
    <td>&nbsp;</td><td>鈴木愛</td><td>16,019万円</td><td>徳島県三好郡</td><td>1994年</td>
  </tr>
  <!-- 以下、省略 -->
  </tbody>
</table>
  

ＣＳＳ 
  /* 基本レイアウト　変更不要 */
.kn_tbl_order {
  border-collapse: collapse;
  table-layout:fixed;
  width:100%;}
.kn_tbl_order
  tr,td{border:1px solid #000;}
.kn_tbl_order
  tr:first-of-type td:nth-of-type(n+1){
  font-weight:bold;
  text-align:center;} 
.kn_tbl_order
  tr td:nth-of-type(n+2){
  padding-left:5px;}
.kn_tbl_order tr:nth-of-type(n+2)
  td:first-of-type {
  text-align:center;}
  /* 基本レイアウト 終了 */
     /* カウンタ */
.kn_tbl_order{counter-reset: ctr 0;}
.kn_tbl_order tr:nth-of-type(n+2){
  counter-increment: ctr;}
.kn_tbl_order tr:nth-of-type(n+2)
  td:first-of-type::before{
  content:"第 "counter(ctr)" 位";
  　　/* 以降はカウンタ表示の修飾 */                            
  font-size:1.05em;}
     /* ----- 列幅の設定 ----- */
.kn_tbl_col tr td:first-of-type{
  width:15%;}
.kn_tbl_col tr td:nth-of-type(2){
  width:20%;}
.kn_tbl_coltr td:nth-of-type(3){
  width:25%;}
.kn_tbl_col tr td:nth-of-type(4){
  width:25%;}
.kn_tbl_col tr td:nth-of-type(5){
  width:15%;}
    /* ----- 特定列への表示設定 ----- */
.kn_tbl_col tr td:nth-of-type(n+3){
  text-align:center;}

複数のテーブルを作成する場合

１．表作成：ｔａｂｌｅタグに２個のクラスを指定し、２つ目のクラス名（事例では、kn_tbl_col）を作成。

２．ＣＳＳ作成：２つ目のクラスで列数と列幅を記述。

列数と列幅の設定事例　列数　×　列幅　＝　１００以下に
    /* ---------全５列　均等幅 --------- */
.kn_tbl_col tr td:nth-of-type(n+1){width:20%;}
    /* ---------全５列　１列目だけ異なり、２列目以降が均一幅 --------- */
.kn_tbl_col tr td:first-of-type{width:10%;}
.kn_tbl_col tr td:nth-of-type(n+2){width:22.5%;}