← 静的パーツギャラリーへ戻る

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

目次固定+本文スクロールの技術ドキュメント2カラム

左に目次(TOC)を固定表示し、右側の本文だけをスクロールできる技術文書向けの構成です。WordPressのナレッジベースやFAQドキュメントページに活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-06-frame">
          <div class="d01-15-06-scroll">
            <div class="d01-15-06-side">
              <div class="d01-15-06-toc-h">目次</div>
              <div class="d01-15-06-toc on">概要</div>
              <div class="d01-15-06-toc">インストール</div>
              <div class="d01-15-06-toc">設定</div>
              <div class="d01-15-06-toc">API</div>
              <div class="d01-15-06-toc">FAQ</div>
            </div>
            <div class="d01-15-06-main">
              <h4>概要</h4>
              <div class="d01-15-06-line w95"></div>
              <div class="d01-15-06-line w90"></div>
              <div class="d01-15-06-line w85"></div>
              <div class="d01-15-06-code"><i></i><i></i><i></i></div>
              <div class="d01-15-06-line w80"></div>
              <div class="d01-15-06-line w88"></div>
              <div class="d01-15-06-line w92"></div>
              <div class="d01-15-06-line w78"></div>
              <div class="d01-15-06-code"><i></i><i></i><i></i></div>
            </div>
          </div>
        </div>

CSS

.prev.d01-15-06{padding:0;display:block}
        .d01-15-06-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d01-15-06-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
        .d01-15-06-side{flex:0 0 26%;position:sticky;top:0;align-self:flex-start;background:#f8fafc;border-right:1px solid #e5e7eb;padding:16px 12px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;min-height:260px}
        .d01-15-06-toc-h{font-size:10px;font-weight:800;color:#94a3b8;letter-spacing:.1em;margin-bottom:2px}
        .d01-15-06-toc{font-size:10.5px;color:#475569;padding:4px 0}
        .d01-15-06-toc.on{color:#2563eb;font-weight:700;border-left:2px solid #2563eb;padding-left:6px;margin-left:-6px}
        .d01-15-06-main{flex:1;padding:18px 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
        .d01-15-06-main h4{margin:0;font-size:13px;color:#1a1d24;font-weight:800}
        .d01-15-06-line{height:7px;border-radius:4px;background:#e7e9ee}
        .d01-15-06-line.w95{width:95%}
        .d01-15-06-line.w92{width:92%}
        .d01-15-06-line.w90{width:90%}
        .d01-15-06-line.w88{width:88%}
        .d01-15-06-line.w85{width:85%}
        .d01-15-06-line.w78{width:78%}
        .d01-15-06-line.w80{width:80%}
        .d01-15-06-code{background:#0f172a;border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
        .d01-15-06-code i{display:block;height:6px;border-radius:3px;background:#334155}
        .d01-15-06-code i:nth-child(2){width:70%;background:#22d3ee}
        .d01-15-06-code i:nth-child(3){width:50%}

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