パーツ番号 03-10-07 ・ CSSのみ

目次(TOC)サイドバー

見出しの階層を字下げで表現し、現在地を左ボーダーで示す静止した目次サイドバーです。WordPressの長文記事ページに固定表示する目次デザインの参考になります。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-10-07-toc">
          <p class="d03-10-07-heading">目次</p>
          <a class="d03-10-07-lv1 is-active" href="#" onclick="return false">1. はじめに</a>
          <a class="d03-10-07-lv1" href="#" onclick="return false">2. 導入方法</a>
          <a class="d03-10-07-lv2" href="#" onclick="return false">2-1. 事前準備</a>
          <a class="d03-10-07-lv2" href="#" onclick="return false">2-2. 初期設定</a>
          <a class="d03-10-07-lv1" href="#" onclick="return false">3. 応用テクニック</a>
          <a class="d03-10-07-lv1" href="#" onclick="return false">4. まとめ</a>
        </nav>

CSS

.d03-10-07-toc{width:100%;display:flex;flex-direction:column}
        .d03-10-07-heading{
          font-size:11px;font-weight:800;color:#94a3b8;margin:0 0 12px;
          text-transform:uppercase;letter-spacing:.06em;
        }
        .d03-10-07-toc a{
          display:block;color:#475569;text-decoration:none;font-size:12.5px;
          padding:7px 0 7px 12px;border-left:2px solid #e2e8f0;
        }
        .d03-10-07-toc a.d03-10-07-lv2{padding-left:26px;font-size:12px;color:#64748b}
        .d03-10-07-toc a.is-active{color:#2563eb;font-weight:700;border-left:2px solid #2563eb}

クラス名 .d03-10-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。