コピペで使える目次デザイン20個まとめ（HTML・CSSで作る記事の目次）

コピペで使える目次デザイン20個まとめ（HTML・CSSで作る記事の目次）

2026.10.04

長い記事でも、最初に目次があると「何が書いてあるか」「どこを読めばいいか」がひと目でわかります。

この記事では、コピペするだけで使える目次のデザインを20個まとめました。
シンプルな枠線タイプから、番号付き、2階層、開閉できるタイプ、2列表示、タイムライン風まで、記事の雰囲気に合わせて選べる種類を用意しています。

これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

目次ってプラグインで自動で作るものだと思ってた！

プラグインも便利だけど、項目が少ない記事や、特定のページだけに置きたい時は、HTMLで書いたほうが手軽なこともあるんだ。見た目も自由に変えられるよ。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、目次を表示したい場所（記事の導入文の下など）に貼り付けます。

各項目のリンク先は、aタグのhref=”#”の部分を「#見出しのID」に書き換えます。
WordPressのブロックエディタでは、見出しブロックを選んで右側の「高度な設定」から「HTMLアンカー」を入れると、その名前がIDになります。

01. シンプルな枠線タイプ

枠線で囲んだだけの、どんなサイトにもなじむ定番の目次です。

実際の見た目

HTMLコード

<nav class="kts-toc01">
  <div class="kts-toc01-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc01 { font-family: sans-serif; }
.kts-toc01 ol, .kts-toc01 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc01 li { list-style: none; margin: 0; }
.kts-toc01 li::marker { content: none; }
.kts-toc01 a { text-decoration: none; }
.kts-toc01 { padding: 18px 22px; border: 1px solid #D1D5DB; border-radius: 8px; }
.kts-toc01-title { margin-bottom: 10px; font-weight: 700; color: #111827; }
.kts-toc01 li a { display: block; padding: 6px 0; color: #2563EB; font-size: 15px; }

02. 番号付きのタイプ

項目の頭に番号を付けた、記事の流れがわかりやすい目次です。

実際の見た目

HTMLコード

<nav class="kts-toc02">
  <div class="kts-toc02-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc02 { font-family: sans-serif; }
.kts-toc02 ol, .kts-toc02 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc02 li { list-style: none; margin: 0; }
.kts-toc02 li::marker { content: none; }
.kts-toc02 a { text-decoration: none; }
.kts-toc02 { padding: 18px 22px; background: #F9FAFB; border-radius: 8px; counter-reset: kts-toc02; }
.kts-toc02-title { margin-bottom: 10px; font-weight: 700; color: #111827; }
.kts-toc02 li { counter-increment: kts-toc02; }
.kts-toc02 li a { display: flex; gap: 10px; padding: 7px 0; color: #1F2937; font-size: 15px; }
.kts-toc02 li a::before { content: counter(kts-toc02) "."; color: #2563EB; font-weight: 700; }

03. 見出しに背景色を付けたタイプ

「目次」の部分に色を敷いた、ひと目で目次とわかるタイプです。

実際の見た目

HTMLコード

<nav class="kts-toc03">
  <div class="kts-toc03-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc03 { font-family: sans-serif; }
.kts-toc03 ol, .kts-toc03 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc03 li { list-style: none; margin: 0; }
.kts-toc03 li::marker { content: none; }
.kts-toc03 a { text-decoration: none; }
.kts-toc03 { border: 2px solid #10B981; border-radius: 8px; overflow: hidden; }
.kts-toc03-title { padding: 10px 18px; background: #10B981; color: #fff; font-weight: 700; }
.kts-toc03 ol { padding: 12px 18px; }
.kts-toc03 li a { display: block; padding: 6px 0; border-bottom: 1px dashed #D1FAE5; color: #065F46; font-size: 15px; }
.kts-toc03 li:last-child a { border-bottom: 0; }

04. 左線アクセントのタイプ

左側に太い線を入れた、すっきりとした印象の目次です。

実際の見た目

HTMLコード

<nav class="kts-toc04">
  <div class="kts-toc04-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc04 { font-family: sans-serif; }
.kts-toc04 ol, .kts-toc04 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc04 li { list-style: none; margin: 0; }
.kts-toc04 li::marker { content: none; }
.kts-toc04 a { text-decoration: none; }
.kts-toc04 { padding: 14px 20px; border-left: 5px solid #8B5CF6; background: #F5F3FF; }
.kts-toc04-title { margin-bottom: 8px; font-weight: 700; color: #5B21B6; }
.kts-toc04 li a { display: block; padding: 5px 0; color: #4C1D95; font-size: 15px; }

05. 小見出し付きの2階層タイプ

大きな見出しの下に小見出しを並べた、長い記事向けの目次です。

実際の見た目

HTMLコード

<nav class="kts-toc05">
  <div class="kts-toc05-title">目次</div>
  <ol>
    <li><a href="#">使い方</a>
      <ul>
        <li><a href="#">HTMLの貼り方</a></li>
        <li><a href="#">CSSの貼り方</a></li>
      </ul>
    </li>
    <li><a href="#">カスタマイズ</a>
      <ul>
        <li><a href="#">色を変える</a></li>
        <li><a href="#">大きさを変える</a></li>
      </ul>
    </li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc05 { font-family: sans-serif; }
.kts-toc05 ol, .kts-toc05 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc05 li { list-style: none; margin: 0; }
.kts-toc05 li::marker { content: none; }
.kts-toc05 a { text-decoration: none; }
.kts-toc05 { padding: 18px 22px; border: 1px solid #E5E7EB; border-radius: 8px; }
.kts-toc05-title { margin-bottom: 10px; font-weight: 700; color: #111827; }
.kts-toc05 > ol > li > a { display: block; padding: 7px 0; color: #111827; font-weight: 700; font-size: 15px; }
.kts-toc05 ul { padding-left: 18px !important; border-left: 2px solid #E5E7EB; margin: 0 0 6px 4px !important; }
.kts-toc05 ul a { display: block; padding: 4px 0; color: #4B5563; font-size: 14px; }

06. 丸い番号アイコン

番号を丸で囲んだ、やわらかい印象の目次です。

実際の見た目

HTMLコード

<nav class="kts-toc06">
  <div class="kts-toc06-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc06 { font-family: sans-serif; }
.kts-toc06 ol, .kts-toc06 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc06 li { list-style: none; margin: 0; }
.kts-toc06 li::marker { content: none; }
.kts-toc06 a { text-decoration: none; }
.kts-toc06 { padding: 18px 22px; background: #FFF7ED; border-radius: 12px; counter-reset: kts-toc06; }
.kts-toc06-title { margin-bottom: 12px; font-weight: 700; color: #9A3412; }
.kts-toc06 li { counter-increment: kts-toc06; }
.kts-toc06 li a { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: #7C2D12; font-size: 15px; }
.kts-toc06 li a::before { content: counter(kts-toc06); flex: 0 0 26px; height: 26px; line-height: 26px; border-radius: 50%; background: #F97316; color: #fff; text-align: center; font-size: 13px; font-weight: 700; }

07. 影付きのカード型

ふんわりとした影で、カードのように浮かせた目次です。

実際の見た目

HTMLコード

<nav class="kts-toc07">
  <div class="kts-toc07-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc07 { font-family: sans-serif; }
.kts-toc07 ol, .kts-toc07 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc07 li { list-style: none; margin: 0; }
.kts-toc07 li::marker { content: none; }
.kts-toc07 a { text-decoration: none; }
.kts-toc07 { padding: 20px 24px; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.kts-toc07-title { margin-bottom: 10px; font-size: 17px; font-weight: 700; color: #111827; }
.kts-toc07 li a { display: block; padding: 8px 0; border-bottom: 1px solid #F3F4F6; color: #374151; font-size: 15px; }
.kts-toc07 li:last-child a { border-bottom: 0; }

08. 矢印アイコン付き

項目の頭に「›」を付けた、リンクらしさが伝わる目次です。

実際の見た目

HTMLコード

<nav class="kts-toc08">
  <div class="kts-toc08-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc08 { font-family: sans-serif; }
.kts-toc08 ol, .kts-toc08 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc08 li { list-style: none; margin: 0; }
.kts-toc08 li::marker { content: none; }
.kts-toc08 a { text-decoration: none; }
.kts-toc08 { padding: 16px 20px; border: 1px solid #BFDBFE; border-radius: 8px; background: #EFF6FF; }
.kts-toc08-title { margin-bottom: 8px; font-weight: 700; color: #1E40AF; }
.kts-toc08 li a { display: block; padding: 6px 0 6px 18px; position: relative; color: #1E3A8A; font-size: 15px; }
.kts-toc08 li a::before { content: "›"; position: absolute; left: 2px; top: 4px; font-weight: 700; color: #3B82F6; }

09. 開閉できる目次

「目次」を押すと開いたり閉じたりできる、すっきり見せたい時のタイプです。

実際の見た目

HTMLコード

<details class="kts-toc09" open>
  <summary class="kts-toc09-title">目次</summary>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</details>

CSSコード

.kts-toc09 { font-family: sans-serif; }
.kts-toc09 ol, .kts-toc09 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc09 li { list-style: none; margin: 0; }
.kts-toc09 li::marker { content: none; }
.kts-toc09 a { text-decoration: none; }
.kts-toc09 { padding: 14px 20px; border: 1px solid #D1D5DB; border-radius: 8px; }
.kts-toc09-title { list-style: none; cursor: pointer; font-weight: 700; color: #111827; }
.kts-toc09-title::-webkit-details-marker { display: none; }
.kts-toc09-title::after { content: "［閉じる］"; margin-left: 8px; font-size: 12px; font-weight: 400; color: #2563EB; }
.kts-toc09:not([open]) .kts-toc09-title::after { content: "［開く］"; }
.kts-toc09 ol { margin-top: 10px !important; }
.kts-toc09 li a { display: block; padding: 6px 0; color: #2563EB; font-size: 15px; }

10. ダークカラーのタイプ

黒系の背景で、引き締まった印象にしたい時の目次です。

実際の見た目

HTMLコード

<nav class="kts-toc10">
  <div class="kts-toc10-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc10 { font-family: sans-serif; }
.kts-toc10 ol, .kts-toc10 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc10 li { list-style: none; margin: 0; }
.kts-toc10 li::marker { content: none; }
.kts-toc10 a { text-decoration: none; }
.kts-toc10 { padding: 18px 22px; background: #111827; border-radius: 10px; }
.kts-toc10-title { margin-bottom: 10px; font-weight: 700; color: #FACC15; letter-spacing: .1em; }
.kts-toc10 li a { display: block; padding: 6px 0; color: #E5E7EB; font-size: 15px; }

11. グラデーションのタイプ

見出しにグラデーションを敷いた、華やかな目次です。

実際の見た目

HTMLコード

<nav class="kts-toc11">
  <div class="kts-toc11-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc11 { font-family: sans-serif; }
.kts-toc11 ol, .kts-toc11 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc11 li { list-style: none; margin: 0; }
.kts-toc11 li::marker { content: none; }
.kts-toc11 a { text-decoration: none; }
.kts-toc11 { border-radius: 12px; overflow: hidden; border: 1px solid #EDE9FE; }
.kts-toc11-title { padding: 12px 20px; background: linear-gradient(90deg, #6366F1, #EC4899); color: #fff; font-weight: 700; }
.kts-toc11 ol { padding: 12px 20px; }
.kts-toc11 li a { display: block; padding: 6px 0; color: #4C1D95; font-size: 15px; }

12. 点線区切りのやわらかいタイプ

点線で囲んだ、手作り感のあるやさしい印象の目次です。

実際の見た目

HTMLコード

<nav class="kts-toc12">
  <div class="kts-toc12-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc12 { font-family: sans-serif; }
.kts-toc12 ol, .kts-toc12 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc12 li { list-style: none; margin: 0; }
.kts-toc12 li::marker { content: none; }
.kts-toc12 a { text-decoration: none; }
.kts-toc12 { padding: 18px 22px; border: 2px dashed #FDBA74; border-radius: 14px; background: #FFFBEB; }
.kts-toc12-title { margin-bottom: 10px; font-weight: 700; color: #C2410C; }
.kts-toc12 li a { display: block; padding: 6px 0; border-bottom: 1px dotted #FED7AA; color: #7C2D12; font-size: 15px; }
.kts-toc12 li:last-child a { border-bottom: 0; }

13. 2列に並ぶタイプ

項目を2列に並べた、項目数が多い時にコンパクトに見せるタイプです。

実際の見た目

HTMLコード

<nav class="kts-toc13">
  <div class="kts-toc13-title">目次</div>
  <ol>
    <li><a href="#">はじめに</a></li>
    <li><a href="#">準備するもの</a></li>
    <li><a href="#">作り方</a></li>
    <li><a href="#">使い方</a></li>
    <li><a href="#">注意点</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc13 { font-family: sans-serif; }
.kts-toc13 ol, .kts-toc13 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc13 li { list-style: none; margin: 0; }
.kts-toc13 li::marker { content: none; }
.kts-toc13 a { text-decoration: none; }
.kts-toc13 { padding: 18px 22px; border: 1px solid #E5E7EB; border-radius: 8px; }
.kts-toc13-title { margin-bottom: 10px; font-weight: 700; color: #111827; }
.kts-toc13 ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.kts-toc13 li a { display: block; padding: 6px 0; color: #2563EB; font-size: 15px; }

14. 横並びのタブ風

項目を横に並べた、ページ上部のナビゲーションのように使えるタイプです。

実際の見た目

HTMLコード

<nav class="kts-toc14">
  <div class="kts-toc14-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc14 { font-family: sans-serif; }
.kts-toc14 ol, .kts-toc14 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc14 li { list-style: none; margin: 0; }
.kts-toc14 li::marker { content: none; }
.kts-toc14 a { text-decoration: none; }
.kts-toc14-title { display: none; }
.kts-toc14 ol { display: flex; flex-wrap: wrap; gap: 8px; }
.kts-toc14 li a { display: block; padding: 8px 16px; border-radius: 999px; background: #F3F4F6; color: #374151; font-size: 14px; }
.kts-toc14 li a:hover { background: #2563EB; color: #fff; }

15. タイムライン風の目次

縦線と点でつないだ、記事の流れが見えるタイプです。

実際の見た目

HTMLコード

<nav class="kts-toc15">
  <div class="kts-toc15-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc15 { font-family: sans-serif; }
.kts-toc15 ol, .kts-toc15 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc15 li { list-style: none; margin: 0; }
.kts-toc15 li::marker { content: none; }
.kts-toc15 a { text-decoration: none; }
.kts-toc15 { padding: 18px 22px; border: 1px solid #E5E7EB; border-radius: 8px; }
.kts-toc15-title { margin-bottom: 12px; font-weight: 700; color: #111827; }
.kts-toc15 li { position: relative; padding-left: 22px; border-left: 2px solid #BAE6FD; }
.kts-toc15 li:last-child { border-left-color: transparent; }
.kts-toc15 li::before { content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: #0EA5E9; }
.kts-toc15 li a { display: block; padding: 6px 0 12px; color: #0C4A6E; font-size: 15px; }

16. アイコン付きの見出し

「目次」の前に絵文字を添えた、親しみやすい目次です。

実際の見た目

HTMLコード

<nav class="kts-toc16">
  <div class="kts-toc16-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc16 { font-family: sans-serif; }
.kts-toc16 ol, .kts-toc16 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc16 li { list-style: none; margin: 0; }
.kts-toc16 li::marker { content: none; }
.kts-toc16 a { text-decoration: none; }
.kts-toc16 { padding: 18px 22px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 10px; }
.kts-toc16-title { margin-bottom: 10px; font-weight: 700; color: #166534; }
.kts-toc16-title::before { content: "📖 "; }
.kts-toc16 li a { display: block; padding: 6px 0; color: #14532D; font-size: 15px; }

17. 小さめの控えめなタイプ

文字を小さくまとめた、サイドバーなど狭い場所で使える目次です。

実際の見た目

HTMLコード

<nav class="kts-toc17">
  <div class="kts-toc17-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc17 { font-family: sans-serif; }
.kts-toc17 ol, .kts-toc17 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc17 li { list-style: none; margin: 0; }
.kts-toc17 li::marker { content: none; }
.kts-toc17 a { text-decoration: none; }
.kts-toc17 { padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 6px; max-width: 260px; }
.kts-toc17-title { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #374151; }
.kts-toc17 li a { display: block; padding: 3px 0; color: #4B5563; font-size: 13px; }
.kts-toc17 li a:hover { color: #2563EB; }

18. マウスを乗せると色が変わるタイプ

項目にマウスを乗せると背景色が変わる、押しやすさが伝わる目次です。

実際の見た目

HTMLコード

<nav class="kts-toc18">
  <div class="kts-toc18-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc18 { font-family: sans-serif; }
.kts-toc18 ol, .kts-toc18 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc18 li { list-style: none; margin: 0; }
.kts-toc18 li::marker { content: none; }
.kts-toc18 a { text-decoration: none; }
.kts-toc18 { padding: 14px; border: 1px solid #E5E7EB; border-radius: 10px; }
.kts-toc18-title { margin: 0 8px 8px; font-weight: 700; color: #111827; }
.kts-toc18 li a { display: block; padding: 9px 10px; border-radius: 6px; color: #374151; font-size: 15px; transition: background .2s, color .2s; }
.kts-toc18 li a:hover { background: #EEF2FF; color: #4338CA; }

19. ノート風の罫線タイプ

ノートの罫線のような線を引いた、学習系の記事に合う目次です。

実際の見た目

HTMLコード

<nav class="kts-toc19">
  <div class="kts-toc19-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc19 { font-family: sans-serif; }
.kts-toc19 ol, .kts-toc19 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc19 li { list-style: none; margin: 0; }
.kts-toc19 li::marker { content: none; }
.kts-toc19 a { text-decoration: none; }
.kts-toc19 { padding: 16px 22px; background: #FFFEF5; border: 1px solid #E7E5E4; border-radius: 4px; box-shadow: 3px 3px 0 #E7E5E4; }
.kts-toc19-title { margin-bottom: 6px; font-weight: 700; color: #44403C; }
.kts-toc19 li a { display: block; padding: 7px 0; border-bottom: 1px solid #BFDBFE; color: #1C1917; font-size: 15px; }

20. 和風の落ち着いたタイプ

明朝体と落ち着いた色で、和の雰囲気に合わせた目次です。

実際の見た目

HTMLコード

<nav class="kts-toc20">
  <div class="kts-toc20-title">目次</div>
  <ol>
    <li><a href="#">使い方</a></li>
    <li><a href="#">HTMLとCSSの貼り方</a></li>
    <li><a href="#">カスタマイズの小ワザ</a></li>
    <li><a href="#">まとめ</a></li>
  </ol>
</nav>

CSSコード

.kts-toc20 { font-family: sans-serif; }
.kts-toc20 ol, .kts-toc20 ul { list-style: none; margin: 0; padding: 0; }
.kts-toc20 li { list-style: none; margin: 0; }
.kts-toc20 li::marker { content: none; }
.kts-toc20 a { text-decoration: none; }
.kts-toc20 { padding: 20px 24px; border-top: 3px double #7C2D12; border-bottom: 3px double #7C2D12; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kts-toc20-title { margin-bottom: 10px; text-align: center; font-weight: 700; letter-spacing: .3em; color: #7C2D12; }
.kts-toc20 li a { display: block; padding: 6px 0; color: #44403C; font-size: 15px; }

カスタマイズの小ワザ

見出しへのリンクは、見出しブロックの「HTMLアンカー」に入れた名前を使って、href=”#アンカー名”と書きます。
項目を増やしたい時は、<li>〜</li>をまるごとコピーして追加してください。
目次プラグインを使っている場合は、プラグインが出力するclass名に合わせてCSSのセレクタを書き換えると、見た目だけを変えられます。
09番の開閉タイプは、detailsタグの「open」を消すと、最初は閉じた状態で表示されます。
色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面	該当する目次
シンプルに使いたい	01, 04, 07
番号で流れを見せたい	02, 06, 15
ひと目で目次とわかる	03, 11, 16
長い記事・小見出しあり	05
リンクらしさを出したい	08, 18
すっきり隠したい	09
引き締めたい	10
やわらかい雰囲気	12, 19
項目が多い	13
ナビゲーション風	14
サイドバー	17
和風のサイト	20

目次があるだけで、記事が読みやすくなりそう！

そうなんだ。読者が知りたいところへすぐ飛べるから、途中で離脱されにくくなるんだよ。見出しのHTMLアンカーとセットで使ってみてね。

20個の目次デザインは、ol・ul・liタグとCSSで作る。見出しへのリンクは、見出しブロックのHTMLアンカーに入れた名前をhrefに書いて設定する。

HTML・CSS, コピペで使えるシリーズ, 目次デザイン

コピペで使えるテキストマーカー・文字装飾20個まとめ（蛍光ペン・下線・強調）

コピペで使えるCTAデザイン20個まとめ（申し込み・お問い合わせへの誘導）