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

二連カラーバー見出し

見出し左端に色の異なる2本の太バーを並べる装飾。ニュース一覧やお知らせセクションの区切りとして目立たせられる。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="bars"><span class="b1"></span><span class="b2"></span></span>
          <h4 class="ttl">お知らせ<br>ニュース一覧</h4>
        </div>

CSS

.d02-10-04 .wrap{ display:flex; align-items:center; gap:16px; }
        .d02-10-04 .bars{ display:flex; gap:4px; flex-shrink:0; }
        .d02-10-04 .b1{ width:5px; height:54px; background:#0ea5e9; border-radius:2px; }
        .d02-10-04 .b2{ width:5px; height:54px; background:#1f2937; border-radius:2px; }
        .d02-10-04 .ttl{ all:unset; display:block; font-size:19px; font-weight:800; color:#1f2937; line-height:1.5; }

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