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

二重枠見出しボックス

外側の細線と内側の太線を組み合わせた二重枠の見出しボックス。案内ページの重要な区画見出しに適する。

staticcss

プレビュー

ソースコード

HTML

<div class="box">
          <div class="inner">
            <h4 class="ttl">お問い合わせ</h4>
          </div>
        </div>

CSS

.d02-07-20 .box{ display:inline-block; padding:6px; border:1px solid #cbd5e1; }
        .d02-07-20 .inner{ border:3px solid #1f2937; padding:14px 26px; }
        .d02-07-20 .ttl{ all:unset; display:block; text-align:center; font-size:18px; font-weight:800; color:#1f2937; }

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