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

破線囲み見出しボックス

見出し全体を破線の角丸ボックスで囲む静的な装飾。手作り感やカジュアルさを出したい告知・キャンペーン見出しに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="box">
          <h4 class="ttl">キャンペーン情報</h4>
        </div>

CSS

.d02-10-07 .box{ padding:18px 28px; border:2px dashed #9ca3af; border-radius:6px; text-align:center; }
        .d02-10-07 .ttl{ all:unset; display:block; font-size:19px; font-weight:800; color:#374151; }

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