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

ソフトカード見出し

見出し全体を丸角の淡い色面カードで軽く包むスタイル。サービス紹介カードや料金プランの各見出しに落ち着いた統一感を与える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="card">
            <h4 class="ttl">ソフトカード見出し</h4>
          </div>
        </div>

CSS

.d02-10-18 .wrap{ text-align:center; }
        .d02-10-18 .card{ display:inline-block; padding:16px 32px; background:#eff6ff; border-radius:16px; box-shadow:0 4px 14px rgba(59,130,246,.15); }
        .d02-10-18 .ttl{ all:unset; display:block; font-size:21px; font-weight:800; color:#1e3a8a; }

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