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

チェッカー見出し

見出しを1文字ずつタイル状に区切り、背景色を交互に変えるスタイル。イベントページやセール告知の目を引く見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="ch">特</span><span class="ch">別</span><span class="ch">企</span><span class="ch">画</span>
        </div>

CSS

.d02-07-31 .wrap{ display:flex; justify-content:center; }
        .d02-07-31 .ch{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; font-size:20px; font-weight:800; color:#fff; background:#1f2937; }
        .d02-07-31 .ch:nth-child(even){ background:#f59e0b; color:#1f2937; }

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