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

マルチカラーワード見出し

見出しを単語ごとに区切り、それぞれ異なる背景色のブロックで見せるスタイル。セール文言など複数要素を並べる見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl"><span class="w c1">今だけ</span><span class="w c2">特別</span><span class="w c3">価格</span></h4>

CSS

.d02-07-41 .ttl{ all:unset; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; font-size:20px; font-weight:800; }
        .d02-07-41 .w{ display:inline-block; padding:5px 12px; color:#fff; border-radius:3px; }
        .d02-07-41 .c1{ background:#6366f1; }
        .d02-07-41 .c2{ background:#ec4899; }
        .d02-07-41 .c3{ background:#f59e0b; }

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