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

ハイライトブロック見出し

見出し文の一部だけを塗りつぶしのブロックで反転表示するスタイル。キャンペーンや数量限定訴求の中で条件部分だけを強調したいときに使える。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl">先着<span class="block">100名様</span>限定キャンペーン</h4>

CSS

.d02-07-28 .ttl{ all:unset; display:block; text-align:center; font-size:22px; font-weight:800; color:#1f2937; line-height:1.7; }
        .d02-07-28 .block{ display:inline-block; background:#1f2937; color:#fff; padding:2px 10px; margin:0 2px; }

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