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

階層ツリー構造のディレクトリサイドバー

フォルダとファイルをインデントで階層表示する静止したツリー型サイドバーです。WordPressのマニュアルサイトやドキュメントポータルのナビゲーションに応用できます。

staticcss

プレビュー

ソースコード

HTML

<aside class="d03-10-03-tree">
          <div class="d03-10-03-node d03-10-03-lv1">
            <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="#94a3b8" stroke-width="1.6"><path d="M2 5h6l2 2h8v9H2z"/></svg>
            <span>ドキュメント</span>
          </div>
          <div class="d03-10-03-node d03-10-03-lv2">
            <svg viewBox="0 0 20 20" width="13" height="13" fill="none" stroke="#94a3b8" stroke-width="1.6"><path d="M2 5h6l2 2h8v9H2z"/></svg>
            <span>プロジェクトA</span>
          </div>
          <div class="d03-10-03-node d03-10-03-lv3 is-active">
            <svg viewBox="0 0 20 20" width="12" height="12" fill="none" stroke="#2563eb" stroke-width="1.6"><path d="M5 2h7l4 4v12H5z"/><path d="M12 2v4h4"/></svg>
            <span>仕様書.pdf</span>
          </div>
          <div class="d03-10-03-node d03-10-03-lv3">
            <svg viewBox="0 0 20 20" width="12" height="12" fill="none" stroke="#94a3b8" stroke-width="1.6"><path d="M5 2h7l4 4v12H5z"/><path d="M12 2v4h4"/></svg>
            <span>議事録.docx</span>
          </div>
          <div class="d03-10-03-node d03-10-03-lv2">
            <svg viewBox="0 0 20 20" width="13" height="13" fill="none" stroke="#94a3b8" stroke-width="1.6"><path d="M2 5h6l2 2h8v9H2z"/></svg>
            <span>プロジェクトB</span>
          </div>
          <div class="d03-10-03-node d03-10-03-lv1">
            <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="#94a3b8" stroke-width="1.6"><path d="M2 5h6l2 2h8v9H2z"/></svg>
            <span>画像</span>
          </div>
        </aside>

CSS

.d03-10-03-tree{width:100%}
        .d03-10-03-node{
          display:flex;align-items:center;gap:8px;padding:6px 4px;
          font-size:12.5px;color:#334155;
        }
        .d03-10-03-node svg{flex:none}
        .d03-10-03-lv1{padding-left:4px;font-weight:700}
        .d03-10-03-lv2{padding-left:24px}
        .d03-10-03-lv3{padding-left:44px;color:#64748b}
        .d03-10-03-node.is-active{color:#2563eb;font-weight:700;background:#eff6ff;border-radius:6px}

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