html&css markerで1.1や1.1.1などの目次を作る

##最近
極鶏のラーメンが食べたいです
ついでに言うと猪一のラーメンも食べたいです

##目次

• 目標
• HTML
• CSS

##目標
リストの入れ子で通常のリストだと↓階層がパッと理解しづらい。

↓こんな感じのリストを作る

##HTML
今回はolで括りましたがulでも大丈夫です。
olにそれぞれfirst second thirdなどの任意のクラスをつける。

index.html

<ol class="first-layer">
    <li>1つ目の階層リスト－１</li>
    <li>1つ目の階層リスト－２</li>
    <ol class="second-layer">
      <li>２つ目の階層リスト－１</li>
      <li>２つ目の階層リスト－２</li>
      <ol class="third-layer">
        <li>３つ目の階層リスト－１</li>
      </ol>
    </ol>
    <li>1つ目の階層リスト－３</li>
    <ol class="second-layer">
      <li>２つ目の階層リスト－１</li>
      <ol class="third-layer">
        <li>３つ目の階層リスト－１</li>
        <li>３つ目の階層リスト－２</li>
      </ol>
      <li>２つ目の階層リスト－２</li>
    </ol>
  </ol>

##CSS
counterとmarkerを使い、作ります。

counter-resetはolが存在する度にcounter-resetで 加算していた num を0にする。
( num=0; )

.css

ol{
	counter-reset: num;
}

counter-incrementで num に加算していく。
リストがある度に1加算される。
( num++; num+=1; )

.css

li{
	counter-increment: num;
}

リストの後ろに marker でリストを作成。marker の content に num の数値を出力する。
( print(num) )

.css

li:before{
	display: marker;
	content: counter(num_f)". ";
}

以上をまとめて...

style.css

li{
	list-style-type: none;
	list-style-position: inside;
}
ol.first-layer{
	counter-reset: num_f;
}
.first-layer li{
	counter-increment: num_f;
}
.first-layer li:before{
	display: marker;
	content: counter(num_f)". ";
}
ol.second-layer{
	counter-reset: num_s;
}
.second-layer li{
	counter-increment: num_s;
}
.second-layer li:before{
	display: marker;
	content: counter(num_f)'.' counter(num_s)". ";
}
ol.third-layer{
	counter-reset: num_t;
}
.third-layer li{
	counter-increment: num_t;
}
.third-layer li:before{
	display: marker;
	content: counter(num_f)'.' counter(num_s)"." counter(num_t)'. ';
}

できました！

###おまけ
n.n.n.や content の '.' を '-' に変更して、
1.0.0や1-0-0も作れます。

.css

ol.first-layer{
	counter-reset: num_f;
	counter-reset: num_s;
	counter-reset: num_t;
}
.first-layer li:before{
	display: marker;
	content: counter(num_f)'.' counter(num_s)"." counter(num_t)'. ';
}
ol.second-layer{
	counter-reset: num_s;
	counter-reset: num_t;
}
.second-layer li:before{
	display: marker;
	content: counter(num_f)'.' counter(num_s)"." counter(num_t)'. ';
}

※変更した箇所を記載
###参考
マーカー
http://www6.plala.or.jp/go_west/nextcss/reference/article/marker.htm

2020/8/7 一部表記を変更