パーツ番号 06-10-02 ・ CSSのみ

階層インデント付き目次(H2/H3構造)

大見出しと小見出しをインデントで階層化した目次。章立てが多い解説記事やマニュアル系コンテンツの構成把握に役立つ。

staticcss

プレビュー

ソースコード

HTML

<p class="ttl06-10-02">目次</p>
        <div class="tree06-10-02">
          <p class="h2-06-10-02">1. 準備編</p>
          <p class="h3-06-10-02">1-1. 必要な道具</p>
          <p class="h3-06-10-02">1-2. 事前チェックリスト</p>
          <p class="h2-06-10-02">2. 実践編</p>
          <p class="h3-06-10-02">2-1. 基本の手順</p>
          <p class="h3-06-10-02">2-2. 応用テクニック</p>
        </div>

CSS

.d06-10-02{width:100%;display:flex;flex-direction:column;}
        .d06-10-02 .ttl06-10-02{margin:0 0 12px;font-size:13px;font-weight:bold;color:#222;}
        .d06-10-02 .tree06-10-02{display:flex;flex-direction:column;gap:7px;}
        .d06-10-02 .h2-06-10-02{margin:0;font-size:12px;font-weight:bold;color:#2c3e6b;}
        .d06-10-02 .h3-06-10-02{margin:0 0 0 18px;font-size:11px;color:#666;padding-left:10px;border-left:2px solid #dde3f5;}

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