パーツ番号 02-16-24 ・ CSSのみ

下線オフセットで階層を示す見出しセット

text-underline-offsetをh2=11px、h3=7px、h4=3pxと詰め、太さも3→2→1pxと連動させる。線が文字に寄るほど下位に見えるという細かい調整だけで階層を作れるので、ブログ本文に自然に馴染む。

staticcss

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">ブログ</p>
          <p class="lv3">制作の裏側</p>
          <p class="lv4">使用したツール</p>
        </div>

CSS

.d02-16-24 .set{ width:100%; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
        .d02-16-24 .lv2{ margin:0; font-size:24px; font-weight:800; color:#7c2d12; line-height:1.35; text-decoration:underline; text-decoration-color:#fb923c; text-decoration-thickness:3px; text-underline-offset:11px; }
        .d02-16-24 .lv3{ margin:0; font-size:18px; font-weight:700; color:#9a3412; line-height:1.35; text-decoration:underline; text-decoration-color:#fdba74; text-decoration-thickness:2px; text-underline-offset:7px; }
        .d02-16-24 .lv4{ margin:0; font-size:14px; font-weight:700; color:#a16207; line-height:1.35; text-decoration:underline; text-decoration-color:#fed7aa; text-decoration-thickness:1px; text-underline-offset:3px; }

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