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

進捗ドット付きミニ目次(一部点灯)

読み進めた項目のドットを点灯させた状態を静止表示するミニ目次。現在地が分かる読了ガイドの見た目サンプルに使える。

staticcss

プレビュー

ソースコード

HTML

<p class="ttl06-10-10">目次</p>
        <div class="mini06-10-10">
          <div class="row06-10-10"><span class="dot06-10-10 on06-10-10"></span><p class="done06-10-10">導入</p></div>
          <div class="row06-10-10"><span class="dot06-10-10 on06-10-10"></span><p class="done06-10-10">背景と課題</p></div>
          <div class="row06-10-10"><span class="dot06-10-10 cur06-10-10"></span><p class="cur-tx06-10-10">解決の方法</p></div>
          <div class="row06-10-10"><span class="dot06-10-10"></span><p>実践例</p></div>
          <div class="row06-10-10"><span class="dot06-10-10"></span><p>まとめ</p></div>
        </div>

CSS

.d06-10-10{width:100%;display:flex;flex-direction:column;}
        .d06-10-10 .ttl06-10-10{margin:0 0 11px;font-size:13px;font-weight:bold;color:#222;}
        .d06-10-10 .mini06-10-10{display:flex;flex-direction:column;gap:8px;}
        .d06-10-10 .row06-10-10{display:flex;align-items:center;gap:10px;}
        .d06-10-10 .dot06-10-10{width:9px;height:9px;border-radius:50%;background:#e1e4ee;flex-shrink:0;}
        .d06-10-10 .on06-10-10{background:#4a6fd8;}
        .d06-10-10 .cur06-10-10{background:#fff;border:2px solid #4a6fd8;width:7px;height:7px;}
        .d06-10-10 .row06-10-10 p{margin:0;font-size:11px;color:#aaa;}
        .d06-10-10 .done06-10-10{color:#888;}
        .d06-10-10 .cur-tx06-10-10{color:#222;font-weight:bold;}

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