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

大型連番見出し

巨大な連番数字と見出しテキストを組み合わせたスタイル。サービス紹介ページの各セクション冒頭に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="heading">
          <span class="num">01</span>
          <span class="text">Our Service<br>提供サービス</span>
        </div>

CSS

.d02-07-01 .heading{ display:flex; align-items:center; gap:18px; }
        .d02-07-01 .num{ all:unset; font-size:64px; font-weight:800; line-height:1; color:#e5e7eb; font-family:Georgia,serif; }
        .d02-07-01 .text{ font-size:20px; font-weight:700; color:#1f2937; line-height:1.4; border-left:2px solid #1f2937; padding-left:16px; }

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