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

点線楕円囲み見出し

見出しの周囲を点線の楕円で軽く囲むスタイル。スタンプのような柔らかい印象で、おすすめ商品やピックアップ見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="oval">
            <h4 class="ttl">おすすめ</h4>
          </div>
        </div>

CSS

.d02-10-36 .wrap{ text-align:center; }
        .d02-10-36 .oval{ display:inline-block; padding:14px 40px; border:2px dotted #a855f7; border-radius:50%/50%; }
        .d02-10-36 .ttl{ all:unset; display:block; font-size:19px; font-weight:800; color:#581c87; }

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