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

見出し-本文フォントペアリング

大見出し・中見出し・本文でサイズと太さを段階的に変えた組み合わせ見本です。WordPressの固定ページや記事テンプレートの基本タイポ設計に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-03-01-wrap">
          <div class="d02-03-01-h1">見出しの力強さを伝える</div>
          <div class="d02-03-01-h2">中見出しは情報を整理する役割</div>
          <p class="d02-03-01-body">本文は読みやすさを最優先し、太さと大きさを抑えて長文でも疲れにくい組み方にしています。</p>
        </div>

CSS

.d02-03-01{background:#fff;text-align:left;align-items:stretch}
        .d02-03-01-wrap{width:100%;max-width:320px;font-family:"游ゴシック","Yu Gothic",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;color:#1e293b}
        .d02-03-01-h1{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin-bottom:12px}
        .d02-03-01-h2{font-size:16px;font-weight:700;color:#334155;margin-bottom:10px}
        .d02-03-01-body{font-size:13.5px;font-weight:400;color:#64748b;line-height:1.9;margin:0}

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