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

二重罫線見出し(細線+太線)

細い線と太い線を上下に重ねて見出しを挟むスタイル。落ち着いた印象のお知らせ欄やコラムの区切り見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="rule thin"></span>
          <span class="rule thick"></span>
          <h4 class="ttl">お知らせ一覧</h4>
          <span class="rule thick"></span>
          <span class="rule thin"></span>
        </div>

CSS

.d02-07-13 .wrap{ display:flex; flex-direction:column; align-items:center; }
        .d02-07-13 .rule{ display:block; width:220px; }
        .d02-07-13 .thin{ height:1px; background:#cbd5e1; }
        .d02-07-13 .thick{ height:4px; background:#1f2937; }
        .d02-07-13 .rule.thin + .rule.thick{ margin-top:3px; }
        .d02-07-13 .ttl{ all:unset; display:block; padding:14px 0; font-size:22px; font-weight:800; color:#1f2937; }
        .d02-07-13 .ttl + .rule.thick{ margin-top:0; }
        .d02-07-13 .rule.thick + .rule.thin{ margin-top:3px; }

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