CSSで見出しデザインを変更する

1. HTMLのh1・h2・h3には役割がある

見た目のためだけにタグを選ぶのではなく、ページタイトルは h1、大きな章は h2、その中の小見出しは h3 のように階層を意識します。

2. セクション見出しの大きさ・色

.section-title {
  color: #172235;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.2;
  letter-spacing: -.04em;
}

色をメインカラーにする場合は color: var(--main-color); に変更できます。

3. 英字ラベル「eyebrow」を調整する

.eyebrow {
  color: var(--main-color);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

このような補助ラベルはデザイン性を高めますが、すべての見出しに追加する必要はありません。

4. h2の左側に線を付ける例

.custom-heading {
  padding-left: 16px;
  border-left: 4px solid var(--main-color);
  color: #172235;
}

装飾は「見出しの階層を分かりやすくする」目的で使い、線・背景・アイコンを一度に盛り込みすぎない方が洗練されます。

5. ページごとにデザインを変えすぎない

• h1はページタイトルとして共通ルール
• h2は各セクションのタイトルとして共通ルール
• h3はカード内・小項目で共通ルール
• 色と余白もできるだけ統一する

統一された見出しは「このサイトはきちんと作られている」という印象につながります。

6. 見出し変更後のチェック

• h1がページ内に基本1つある
• h2・h3の順序が不自然ではない
• 見出しと本文の間に適度な余白がある
• スマホで見出しが細かく改行されすぎない
• 全ページで見出しデザインが統一されている