CSSを使って自動で番号を振る

前書き

CSSを使って自動で番号を振る方法を掲載しています。

目次

1. counterに関するプロパティ
2. 単数階層
3. 複数階層（olタグを入れ子にする）
4. 複数階層（olタグを入れ子にしない）
5. アラビア数字以外にする
6. 参考

counterに関するプロパティ

/* カウンターをリセットする */
  counter-reset: カウンター名 整数;

/* カウンターを増やす（減らす） */
  counter-increment: カウンター名 整数;

/* 表示形式（スタイル、文字列は任意） */
  counter( カウンター名, スタイル );
  counters( カウンター名, 文字列, スタイル );

/* 表示 */
  content

単数階層

<ol class="ol-a">
  <li class="li-a">〇〇〇</li>
  <li class="li-a">〇〇〇</li>
  <li class="li-a">〇〇〇</li>
</ol>

.ol-a{
  counter-reset: li-a 0; //リセット
  list-style: none;
  border-bottom: 1px solid #a675a5;
}
.li-a{
  position: relative;
  padding: 0.5em 0 0.5em 1.25em;
  border-top: 1px solid #a675a5;
  &::before{
    counter-increment: li-a 1; //1追加
    content: counter(li-a)'.'; //表示
    position: absolute;
    top: 0.5em;
    left: 0;
  }
}

複数階層（olタグを入れ子にする）

<ol class="ol-a">
  <li class="li-a">〇〇〇</li>
  <li class="li-a">〇〇〇
    <ol class="ol-a">
      <li class="li-a">〇〇〇</li>
      <li class="li-a">〇〇〇
        <ol class="ol-a">
          <li class="li-a">〇〇〇</li>
          <li class="li-a">〇〇〇</li>
        </ol>
      </li>
      <li class="li-a">〇〇〇</li>
    </ol>
  </li>
  <li class="li-a">〇〇〇</li>
</ol>

//olタグを入れ子にして、counters() の方を使用して番号を振っています
.ol-a{
  counter-reset: li-a 0; //リセット
  list-style: none;
  border-bottom: 1px solid #a675a5;
}
.li-a{
  position: relative;
  padding: 0.5em 0 0.5em 1.25em;
  border-top: 1px solid #a675a5;
  &::before{
    counter-increment: li-a 1; //1追加
    content: counters(li-a,'-')'.'; //表示
    position: absolute;
    top: 0.5em;
    left: 0;
  }
}
.li-a .ol-a{
  margin: 0.5em 0 0;
  border-bottom: 0;
}
.li-a .li-a{
  padding-left: 2.5em;
  &:nth-last-of-type(1){
    padding-bottom: 0;
  }
}
.li-a .li-a .li-a{
  padding-left: 3.75em;
}

複数階層（olタグを入れ子にしない）

<ol class="ol-a">
  <li class="li-a">〇〇〇</li>
  <li class="li-a">〇〇〇</li>
  <li class="li-b">〇〇〇</li>
  <li class="li-b">〇〇〇</li>
  <li class="li-c">〇〇〇</li>
  <li class="li-c">〇〇〇</li>
  <li class="li-b">〇〇〇</li>
  <li class="li-a">〇〇〇</li>
  <li class="li-b">〇〇〇</li>
  <li class="li-b">〇〇〇</li>
</ol>

//li-a、li-b、li-cの3つを用意して、counter()の方を使用して番号を振っています
.ol-a{
  counter-reset: li-a 0; //a リセット
  list-style: none;
  border-bottom: 1px solid #a675a5;
}
.li-a,
.li-b,
.li-c{
  position: relative;
  padding: 0.5em 0;
  border-top: 1px solid #a675a5;
  &::before{
    position: absolute;
    top:0.5em;
  }
}
.li-a{
  counter-reset: li-b 0; //b リセット
  padding-left: 1.25em;
  &::before{
    counter-increment: li-a 1; //a 1追加
    content: counter(li-a)'.'; //a 表示
    left: 0;
  }
}
.li-b{
  counter-reset: li-c 0; //c リセット
  padding-left: 3.5em;
  &::before{
    counter-increment: li-b 1; //b 1追加
    content: counter(li-a)'-'counter(li-b)'.'; //b 表示
    left: 1em;
  }
}
.li-c{
  padding-left: 5.75em;
  &::before{
    counter-increment: li-c 1; //c 1追加
    content: counter(li-a)'-'counter(li-b)'-'counter(li-c)'.'; //c 表示
    left: 2em;
  }
}

アラビア数字以外にする

指定出来るスタイルについては、下記を参照してください。

list-style-type

いろは

.li-a::before{
  //前略
  content: counter(li-a,hiragana-iroha)'.';
}

アルファベット

.li-a::before{
  //前略
  content: counter(li-a,lower-alpha)'.';
}

漢数字

.li-a::before{
  //前略
  content: "第"counter(li-a,cjk-ideographic)'回';
}

参考

CSS カウンターの使用

list-style-type

【CSS】counterを利用した自動ナンバリング

関連記事

大きさの異なる要素を隙間なく配置する（HTML/CSS）

フォトギャラリーを作る（HTML/CSS/JS）

画面全体に表示するメニューを作る（HTML/CSS/JS）

開閉するボックスを作る（HTML/CSS/JS）

WEBページの部品作り