【HTML/CSS】コピペで作る！おしゃれな目次デザイン3選

Q: SWELLなど、WordPressテーマに標準搭載されている「目次機能」のデザインだけを上書きできますか？

可能です。 HTMLはコピペせず、CSSのみを使用します。 当記事のCSSコードのセレクタ（例：.custom-toc）の部分をSWELLの目次のクラス名である.swell-tocなどに書き換えて追加CSSに貼り付けるだけでデザインがおしゃれに切り替わります。

Q: 5000文字程度のSEO長文記事で、見出し（H2・H3）が多く目次が縦に長くなりすぎてしまいます。

目次エリアが長すぎる場合は、CSSでスクロールバーを付けるのがおすすめです。 目次全体を囲む親要素に対してmax-height: 300px;（最大高さ）とoverflow-y: auto;を追記すると、コンパクトなスクロール式目次になります。 重要なH2見出しだけに絞る設定も有効です。

Q: 目次の背景を「グラデーション」に変更できますか？

はい、簡単に変更可能です。 CSSのbackgroundプロパティにlinear-gradientを指定することで美しいグラデーションになります。

Q: 目次の「1. 2.」という数字を消して、チェックマークなどの「アイコン」にしたいです。

数字を消すには、目次のリスト要素（li）に対してCSSでlist-style: none;を指定します。 その後、擬似要素（::before）のcontentプロパティを使って、お好みのFontAwesomeアイコンやSVG画像を配置してください。

2026年2月25日2026年6月13日

Simple Tocの3つのデザインバリエーション：灰色背景＆枠線、フラットデザイン＆枠線、フラットデザイン。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、WordPressで使えるおしゃれな目次デザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、目次を作成するにはul・li・olタグを利用します。

ul・li・olタグの使い方を詳しく知りたい人は「【html&css】ul・li・olの使い方とおしゃれなデザインリスト」を一読ください。

【HTML/CSS】ul・li・olの使い方とおしゃれなリストデザイン

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、目次以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock

シンプルな目次

ここでは、以下のシンプルな目次デザイン例を記載しています。

シンプルな目次デザイン

灰色背景＆枠線
フラットデザイン＆枠線
フラットデザイン

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目も目次ページでは選択式でご用意しました。

調整項目一覧

枠線の色
背景色
テキスト色
タイトルのアイコン
マーカーの種類

ご興味があれば「目次一覧ページ」を一読ください。

Code Stock

TOC | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Simple Toc シンプルな目次目次見出し1 見出し2 見出し2-1 見出し2-2 灰色背景＆枠線▼ 目次…

灰色背景＆枠線

HTMLコード表示

<div class="toc-1">
  <div>
    目次
  </div>
  <ol>
    <li><a href="#">見出し1</a></li>
    <li>
      <a href="#">見出し2</a>
      <ol>
        <li><a href="#">見出し2-1</a></li>
        <li><a href="#">見出し2-2</a></li>
      </ol>
    </li>
  </ol>
</div>

CSSコード表示

.toc-1 {
  margin-bottom: 30px;
  padding: 1em 1em 1em 2em;
  border: 1px solid #999999;
  background-color: #f7f7f7;
  color: #333333;
}

.toc-1 div {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 5px 0;
}

.toc-1 ol {
  list-style-type: decimal;
  margin: 0;
  padding: 0 1.2em;
  overflow: hidden;
}

.toc-1 ol ol {
  margin-top: 5px;
}

.toc-1 li {
  padding: 5px 0;
}

.toc-1 a {
  color: #166c9d;
}

フラットデザイン＆枠線

HTMLコード表示

<div class="toc-2">
  <div>
    目次
  </div>
  <ol>
    <li><a href="#">見出し1</a></li>
    <li>
      <a href="#">見出し2</a>
      <ol>
        <li><a href="#">見出し2-1</a></li>
        <li><a href="#">見出し2-2</a></li>
      </ol>
    </li>
  </ol>
</div>

CSSコード表示

.toc-2 {
  margin-bottom: 30px;
  border: 2px solid #2589d0;
  border-radius: 3px;
}

.toc-2 div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
  font-size: 1.1em;
}

.toc-2 div::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}

.toc-2 ol {
  list-style-type: decimal;
  margin: 0;
  overflow: hidden;
}

.toc-2 > ol {
  padding: 1em 1em 1em 3em;
}

.toc-2 ol ol {
  margin-top: 5px;
  padding-left: 1.1em;
}

.toc-2 li {
  padding: 5px 0;
  font-weight: 600;
}

.toc-2 ol ol li {
  font-weight: 500;
  font-size: .9em;
}

.toc-2 a {
  color: #333;
  text-decoration: none;
}

フラットデザイン

HTMLコード表示

<div class="toc-2">
  <div>
    目次
  </div>
  <ol>
    <li><a href="#">見出し1</a></li>
    <li>
      <a href="#">見出し2</a>
      <ol>
        <li><a href="#">見出し2-1</a></li>
        <li><a href="#">見出し2-2</a></li>
      </ol>
    </li>
  </ol>
</div>

CSSコード表示

.toc-2 {
  margin-bottom: 30px;
  border: 2px solid #2589d0;
  border-radius: 3px;
}

.toc-2 div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
  font-size: 1.1em;
}

.toc-2 div::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}

.toc-2 ol {
  list-style-type: decimal;
  margin: 0;
  overflow: hidden;
}

.toc-2 > ol {
  padding: 1em 1em 1em 3em;
}

.toc-2 ol ol {
  margin-top: 5px;
  padding-left: 1.1em;
}

.toc-2 li {
  padding: 5px 0;
  font-weight: 600;
}

.toc-2 ol ol li {
  font-weight: 500;
  font-size: .9em;
}

.toc-2 a {
  color: #333;
  text-decoration: none;
}