h1・h2・h3の階層デザイン｜サイズ比と余白をCSS変数でそろえる

h2には太い下線、h3には背景色。どちらも単独では見やすいのに、記事に並べると見出し同士が競って見える。そんなときは装飾を増やす前に、本文からh3、h2、h1へ進むサイズの段階と、見出し前後の余白をそろえてみます。

この記事では、共通の基準サイズに比率を掛けてh1〜h3を作ります。まず1.25を出発点にし、長い日本語見出しと本文を並べて比較します。1.25が正解という意味ではありません。装飾の形を探す場合は、見出しデザイン20種類のサンプルで選べます。

記事全体の見本で、比率と余白を比べる

下のデモで、本文の基準と段階比率を選んでください。見本の中をスクロールすると、h2の章の切れ目と、その中にあるh3を確認できます。幅を狭くすると、長い見出しの折り返しも比べられます。

デモは見本の中だけを書き換えます。入力を外部へ送ったり、ブラウザへ保存したりしません。コピーしたCSSは記事用のコンテナへ適用し、theme.jsonの例は既存設定へ必要な部分を統合してください。

比率	比較するときの着眼点	確かめたいこと
1.2	段階差を小さめにする	h2とh3を本文の途中で見分けられるか
1.25	中間の出発点にする	章の切れ目と長い見出しの行数が釣り合うか
1.333	段階差を大きめにする	スマホでh1が何行も続き、本文まで遠くならないか

短い英字の見出しだけを見て決めず、実際に使う日本語の長さと書体で確認します。同じ比率でも、文字幅や太さ、本文の量によって見え方は変わります。書体の指定や読み込みは、CSSのフォント指定で確認できます。

一つの基準からh1・h2・h3を作る

この例では、見出し用の基準をstepとし、h3はstep×比率、h2はstep×比率の2乗、h1はstep×比率の3乗にしています。各見出しへ別々のclampを手で調整する代わりに、共通のstepだけを画面幅に応じて変える構成です。

本文の基準1rem、比率1.25のCSSは次のとおりです。.reading-articleの中へ範囲を限定しています。

.reading-article {
  --body-size: 1rem;
  --ratio: 1.25;
  --step: clamp(1rem, calc(0.9rem + 0.5vw), 1.125rem);
  font-size: var(--body-size);
  line-height: 1.9;
  overflow-wrap: anywhere;
  counter-reset: chapter;
}
.reading-article :is(h1, h2, h3) { line-height: 1.45; font-weight: 700; }
.reading-article h1 {
  font-size: calc(var(--step) * var(--ratio) * var(--ratio) * var(--ratio));
  margin-block: 0 1.5rem;
}
.reading-article h2 {
  font-size: calc(var(--step) * var(--ratio) * var(--ratio));
  margin-block: 3rem 1rem;
  counter-increment: chapter;
}
.reading-article h3 {
  font-size: calc(var(--step) * var(--ratio));
  margin-block: 2rem 0.75rem;
}
.reading-article p { margin-block: 0 1rem; }
.reading-article .chapter-number { display: none; }
.reading-article .chapter-number::before { content: counter(chapter) ". "; }

ルートの文字サイズが16pxで、見出し用stepが下限の16pxになった場合、h3は20px、h2は25px、h1は31.25pxです。stepが上限の18pxになれば、h3は22.5px、h2は28.125px、h1は約35.16pxになります。画面幅が変わっても、h1とh2、h2とh3の比率を保てます。

clamp(最小値, 望ましい値, 最大値)は、中央の式を上下の範囲に収めます。この例はremを基準にし、vwを小さく加えています。vwだけでサイズを決めるものではありません。構文の詳細はMDNのclamp()解説を参照してください。

remを入れたからといって、文字拡大時の読みやすさが自動的に保証されるわけではありません。ブラウザの文字設定やズームを変え、見出しが切れないか、横スクロールを強いられないかも確認します。

HTMLの階層を、サイズに合わせて変えない

単独のHTMLページでは、次のように見出しを置けます。h2の話題をさらに分けるときにh3を使い、「この文字サイズが欲しいからh3にする」という選び方を避けます。

<article class="reading-article">
  <h1>週末の作業部屋を整える</h1>
  <p>ページ全体の導入です。</p>
  <h2>今の使い方を書き出す</h2>
  <p>この章で扱う話題です。</p>
  <h3>毎日使うものを先に残す</h3>
  <p>章の中の具体的な説明です。</p>
  <h2>一週間使って置き場所を直す</h2>
  <p>次の章の説明です。</p>
</article>

WordPressでは、記事タイトルのh1をテンプレートがすでに出している場合があります。その場合は、この例のh1を本文へ重ねて入れないでください。サイズの調整と、ページの見出し構造は別に確認します。

見出しの前を広く、後ろは本文へつなげる

文字サイズだけで階層を見せようとすると、見出しが大きくなりすぎることがあります。この例では、h2の前を3rem、後ろを1remにして、前の章との区切りを強めています。h3は前2rem、後ろ0.75remです。

要素	前の余白	後ろの余白	見たい関係
h1	0	1.5rem	ページの導入へつなぐ
h2	3rem	1rem	前の章から区切り、この章の本文へつなぐ
h3	2rem	0.75rem	章の中で話題を分ける

これも固定の正解ではなく、デモの出発点です。h2の直後にh3が続く記事では、余白が大きく見えることがあります。見出しの間に説明文が必要か、それとも余白の調整が必要かを、実際の構成で判断してください。

通常のブロック配置では、隣り合う上下marginが相殺される場合があります。数値を単純に足した距離になるとは限りません。WordPressのblockGapや既存テーマの余白指定も含め、開発者ツールで最終的な間隔を見ます。

長い見出しを途中で切らない

見出しを一行へ押し込むために、小さい文字へ落とす、固定の高さとoverflow:hiddenで切る、といった処理を先に入れないようにします。今回のCSSでは行高を1.45にし、長い語がはみ出す場合に折り返せるようにしています。

実際の見出しを入れたら、①何行になるか、②行同士が詰まっていないか、③本文との距離が章の区切りに見えてしまわないか、の順で確認できます。

番号が必要なら、装飾なのか参照先なのかを決める

デモの「章の飾り番号」は、h2ごとにCSSカウンターを進めています。番号がなくても見出しの意味が通る、見た目の区切り用です。表示するには、h2の先頭へ番号用spanを置き、コピーしたCSSのdisplayをinlineにします。

<h2>
  <span class="chapter-number" aria-hidden="true"></span>
  今の使い方を書き出す
</h2>

一方、「第2章を参照」のように番号を情報として使うなら、番号をHTML本文にも含め、aria-hiddenで隠さない形にします。読み上げる人にも同じ参照先が伝わる必要があるためです。目次にも番号を出すなら、本文・目次・参照文の番号がそろうかを確認してください。

CSSカウンターや番号の装飾方法そのものは、既存の見出しデザイン集に例があります。番号を加える前に、番号なしでもh2とh3の区切りが分かるかを見ておくと、装飾へ頼りすぎずに済みます。

WordPressのtheme.jsonへ写すときは、適用範囲を確認する

デモのtheme.json欄には、同じ比率を展開したfontSizeと余白を出力しています。CSSの.reading-articleと違い、styles.elementsのh1〜h3はサイト全体の該当要素へ影響する設定です。サイドバーや固定ページも含めて確認します。

本文基準1rem・比率1.25の場合の設定例です。既存のtheme.json全体と置き換えず、styles.elementsにある該当項目へ統合してください。

{
  "version": 3,
  "styles": {
    "elements": {
      "h1": {
        "typography": {
          "fontSize": "clamp(1.9531rem, calc(1.7578rem + 0.9766vw), 2.1973rem)",
          "lineHeight": "1.45",
          "fontWeight": "700"
        },
        "spacing": {
          "margin": {
            "top": "0",
            "bottom": "1.5rem"
          }
        }
      },
      "h2": {
        "typography": {
          "fontSize": "clamp(1.5625rem, calc(1.4063rem + 0.7813vw), 1.7578rem)",
          "lineHeight": "1.45",
          "fontWeight": "700"
        },
        "spacing": {
          "margin": {
            "top": "3rem",
            "bottom": "1rem"
          }
        }
      },
      "h3": {
        "typography": {
          "fontSize": "clamp(1.25rem, calc(1.125rem + 0.625vw), 1.4063rem)",
          "lineHeight": "1.45",
          "fontWeight": "700"
        },
        "spacing": {
          "margin": {
            "top": "2rem",
            "bottom": "0.75rem"
          }
        }
      }
    }
  }
}

このJSONは見出しのサイズ・行高・太さ・余白だけを扱い、本文のフォントサイズ、番号のspanやカウンターは含めていません。本文の既存設定は別に確認します。計算値を小数点以下4桁へ丸めているため、CSS版とはごく小さな丸め差が出ます。

ローカルのWordPress 7.0では、WP_Theme_JSONがこの設定からh1・h2・h3のCSSを生成することを確認しました。サイトエディターで保存したスタイルや、ブロック単位の指定、テーマCSSとの優先関係によって最終表示は変わります。既存テーマの設定を書き換えて、すべてのページで同じ見え方になると保証したものではありません。設定の対象はWordPress公式のスタイル適用範囲で確認できます。

最初は代表的な記事を一本選び、長いh1、章のh2、二行になるh3を入れて比率と余白を決めます。その後、見出しが短い記事や、サイドバーのあるページにも広げて確認してください。装飾を選ぶ前に、本文を含むページの流れで階層が伝わるかを確かめられます。