パーツ番号 02-07-19 ・ CSSのみ

ドット3連ブレッドクラム見出し

見出しの上に小さなドットを3つ並べて位置づけを示すスタイル。長文コンテンツ内の章の切り替わりに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="dots"><span></span><span></span><span></span></div>
          <h4 class="ttl">選ばれる理由</h4>
        </div>

CSS

.d02-07-19 .wrap{ text-align:center; }
        .d02-07-19 .dots{ display:flex; justify-content:center; gap:6px; margin-bottom:10px; }
        .d02-07-19 .dots span{ width:5px; height:5px; border-radius:50%; background:#cbd5e1; display:block; }
        .d02-07-19 .dots span:nth-child(2){ background:#94a3b8; }
        .d02-07-19 .dots span:nth-child(3){ background:#1f2937; }
        .d02-07-19 .ttl{ all:unset; display:block; font-size:22px; font-weight:800; color:#1f2937; }

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