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

シンプル番号付き目次リスト

数字と項目名だけを並べた装飾を抑えた目次。WordPressの記事冒頭に置くシンプルな目次見出しの見た目として使える。

staticcss

プレビュー

ソースコード

HTML

<p class="ttl06-10-01">目次</p>
        <ol class="lst06-10-01">
          <li>はじめに</li>
          <li>基本の考え方</li>
          <li>具体的な手順</li>
          <li>よくある失敗と対策</li>
          <li>まとめ</li>
        </ol>

CSS

.d06-10-01{width:100%;display:flex;flex-direction:column;}
        .d06-10-01 .ttl06-10-01{margin:0 0 12px;font-size:13px;font-weight:bold;color:#222;border-left:4px solid #4a6fd8;padding-left:9px;}
        .d06-10-01 .lst06-10-01{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;}
        .d06-10-01 .lst06-10-01 li{font-size:11.5px;color:#333;line-height:1.4;}
        .d06-10-01 .lst06-10-01 li::marker{color:#4a6fd8;font-weight:bold;}

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