パーツ番号 02-03-08 ・ CSSのみ

番号見出しスタイル

大きな数字を添えた見出しデザインの見本です。WordPressのサービス紹介や制作フローの各工程見出しに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-03-08-wrap">
          <span class="d02-03-08-num">01</span>
          <h4 class="d02-03-08-title">ヒアリング</h4>
        </div>

CSS

.d02-03-08{background:#f8fafc;text-align:left}
        .d02-03-08-wrap{display:flex;align-items:baseline;gap:14px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif}
        .d02-03-08-num{font-size:44px;font-weight:800;color:#e2e8f0;letter-spacing:-.02em;line-height:1}
        .d02-03-08-title{font-size:19px;font-weight:700;color:#0f172a;margin:0}

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