Decorating the table of contents (noindex)

目次のサンプル

HTMLコード

<ul class="table-of-contents">
  <li><a href="#">大見出し１</a>
    <ul>
      <li><a href="#">中見出し１</a>
        <ul>
          <li><a href="#">小見出し１</a></li>
          <li><a href="#">小見出し２</a>
            <ul>
              <li><a href="#">小小見出し１</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">中見出し２</a>
        <ul>
          <li><a href="#">小見出し１</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">大見出し２</a>
    <ul>
      <li><a href="#">中見出し３</a></li>
    </ul>
  </li>
  <li><a href="#">大見出し３</a></li>
</ul>

CSSコード

.entry-content .table-of-contents {
  position: relative;
  margin: 2em 5px;
  padding: 1em 2em;
  background: rgb(252, 250, 247, 87%);
  border: 2px solid;
  border-radius: 7px;
  border-color: #008db7;
  overflow-wrap: break-word;
  z-index: 100;
}

.table-of-contents>li {
  counter-increment: mycounter;
  padding-left: 5px;
}

.table-of-contents>li::marker {
  content: '';
}

.table-of-contents>li>ul {
  list-style: disc;
  list-style-position: inside;
  color: rgb(222, 184, 135);
}

.entry-content .table-of-contents>li:before {
  content: counter(mycounter, decimal-leading-zero) " |";
  position: relative;
  top: 2px;
  left: -16px;
  font-family: "Unica One", cursive;
  font-size: 1.4em;
  letter-spacing: -1px;
  color: #008db7;
}

.table-of-contents a {
  text-decoration: none;
  color: #5684d7;
  word-wrap: break-word;
}

.table-of-contents>li>ul>li {
  position: relative;
  margin-left: 10px;
}

.table-of-contents>li>ul>li a {
  position: absolute;
  margin-left: -10px;
}

.table-of-contents>li>ul>li>ul>li::marker {
  color: #87adde;
}

.table-of-contents>li>ul>li>ul li {
  margin-left: -7px;
}

コードの解説

.entry-content .table-of-contents
- overflow-wrap: break-word
  長い単語やURLがコンテナ内で適切に改行されるようにします。
.table-of-contents>li
- counter-increment: mycounter
  カウンター mycounter を増加させ、各リストアイテムに連番を表示します。
.table-of-contents>li::marker
- content: ''
  リストアイテムのマーカーを空に設定し、通常のリストマーカー（数字や記号）が表示されなくなります。
.table-of-contents>li>ul
- list-style: disc
  リストアイテムのマーカーを円形の点に設定します。
- list-style-position: inside
  マーカーをリストアイテムの内側に表示します。
- table-of-contents>li>ul の>の部分は、階層構造を指定するために使用されます。このセレクターは「子孫セレクター」と呼ばれ、親子関係を表現します。具体的には、次のような階層構造を持つ要素を選択します:
  - .table-of-contents というクラスを持つ要素の中にある
  - リストアイテム（li）の中にある
  - さらにその中にあるリスト（ul）
  これは親要素から子要素、その子要素からさらに子要素を選択するために使用され、特定の階層にある要素をピンポイントで選択するのに役立ちます。
  >を使用することで、特定の要素をターゲットにスタイルを適用できます。
.entry-content .table-of-contents>li:before
- counter(mycounter, decimal-leading-zero)
  カウンター mycounter の値を0から始まる数字で表示します。
  content: counter(mycounter)の部分にコンマ区切りでdecimal-leading-zeroを追加すると、「01、02、03」のような2桁表示にできます。
  さらに" |"で番号の右に縦の罫線を引いています。
.table-of-contents a
- text-decoration: none
  リンクテキストの下線を非表示にしています。