【html&css】WordPressで使える！おしゃれな目次デザイン3選

2026年2月25日

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

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

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

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

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

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

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

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

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

シンプルな目次

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

シンプルな目次デザイン

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

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

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

調整項目一覧

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

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

Code Stock

TOC | Code Stock Simple Toc シンプルな目次目次見出し1 見出し2 見出し2-1 見出し2-2 灰色背景＆枠線▼ 目次見出し1 見出し2 見出し2-1 見出し2-2 フラットデザイン＆枠線▼ 目次見出し1…

灰色背景＆枠線

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;
}