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

菱形フランク見出し

見出しの両脇に小さな菱形記号を配したスタイル。ECサイトのおすすめ商品や特集タイトルに上品なアクセントを添える。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl"><span class="d">&#9670;</span>おすすめ商品<span class="d">&#9670;</span></h4>

CSS

.d02-10-30 .ttl{ all:unset; display:flex; align-items:center; justify-content:center; gap:12px; font-size:21px; font-weight:800; color:#1f2937; }
        .d02-10-30 .d{ color:#0ea5e9; font-size:10px; }

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