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

インラインバッジ添え見出し

見出し文の左に小さな反転バッジを添えるスタイル。新着記事や更新情報の一覧見出しにさりげなく使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="badge">NEW</span>
          <h4 class="ttl">新着コラム</h4>
        </div>

CSS

.d02-07-18 .wrap{ display:flex; align-items:center; gap:10px; }
        .d02-07-18 .badge{ display:inline-flex; align-items:center; justify-content:center; padding:3px 9px; background:#dc2626; color:#fff; font-size:10px; font-weight:800; border-radius:4px; letter-spacing:.05em; }
        .d02-07-18 .ttl{ all:unset; font-size:20px; font-weight:800; color:#1f2937; }

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