パーツ番号 02-10-23 ・ CSSのみ

階段下線見出し

見出し下に長さの異なる短い線を3本、段違いに並べたスタイル。ステップ紹介やランキングの見出しに軽快なリズムを与える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">階段下線見出し</h4>
          <div class="stairs"><span></span><span></span><span></span></div>
        </div>

CSS

.d02-10-23 .wrap{ text-align:center; }
        .d02-10-23 .ttl{ all:unset; display:block; font-size:21px; font-weight:800; color:#1f2937; margin-bottom:8px; }
        .d02-10-23 .stairs{ display:flex; flex-direction:column; align-items:center; gap:3px; }
        .d02-10-23 .stairs span{ display:block; height:3px; border-radius:2px; background:#0ea5e9; }
        .d02-10-23 .stairs span:nth-child(1){ width:60px; }
        .d02-10-23 .stairs span:nth-child(2){ width:40px; }
        .d02-10-23 .stairs span:nth-child(3){ width:20px; }

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