Web制作者は要チェック！ネストされたh1要素のデフォルトのUAスタイルがすべてのブラウザで変更されます

Post on:2025年5月13日

はじめに

現在、Firefoxをはじめ、Chrome, Safariなどの各ブラウザで、ネストされた見出し要素（h1要素）のデフォルトのUAスタイルを変更する動きがでています。デベロッパーはこれまでとは異なる表示になるのを避けるために、UAスタイルに依存していないか確認する必要があります。

この記事では、どのような変更がおこなわれるのか、それがページ上で問題になっているかどうかを確認する方法、そして準拠してより構造化されたWebサイトを構築するためのヒントを紹介します。

h1要素のデフォルトスタイルの変更点

HTMLの仕様では、<h1>要素がネストされているセクション要素（<section>, <aside>, <nav>, <article>）内に入れ子になっているかに基づいて、暗黙的にセマンティックな見出しレベルを与えるアウトラインのアルゴリズムが定義されていました。

ブラウザのレンダリングでは、section > h1が<h2>と同じフォントサイズとマージンを持つようになっており、section > section > h1は<h3>として表現され、以下も同様です。デフォルトのレンダリングはブラウザのUAスタイルで実装されており、アクセシビリティツリー（スクリーンリーダーが使用するもの）には実装されていませんでした。Webサイトはセクショニング要素の使用を開始しましたが、アウトラインのアルゴリズムによる自動見出しレベルが表示されるとは想定していませんでした。

このUAの仕様はデベロッパーが<h1>要素をどこで使用できるかについて混乱を招き、ツールはHTMLを異なる方法で処理し、アウトラインのアルゴリズムは問題があるとみなされました。アウトラインのアルゴリズムは2022年にHTMLの仕様から削除されましたが、UAスタイルシートのルールは依然として残っているのが現状です。各ブラウザのベンダーは現在、デフォルトスタイルを削除し始めています。

/* xは:is(article, aside, nav, section) */
x h1 { margin-block: 0.83em; font-size: 1.50em; }
x x h1 { margin-block: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; }

/* xは:is(article, aside, nav, section) */

x h1 { margin-block: 0.83em; font-size: 1.50em; }

x x h1 { margin-block: 1.00em; font-size: 1.17em; }

x x x h1 { margin-block: 1.33em; font-size: 1.00em; }

x x x x h1 { margin-block: 1.67em; font-size: 0.83em; }

x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; }

たとえば、こんな感じです。

<body>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
      <section>
        <h1>Level 4</h1>
      </section>
    </section>
  </section>
</body>

<body>

<h1>Level 1</h1>

<h1>Level 2</h1>

<h1>Level 3</h1>

<h1>Level 4</h1>

</section>

</body>

これまでのブラウザでは下記のように表示されます。

古いUAスタイルのブラウザでの表示

新しいUAスタイルでは下記のように表示されます。

新しいUAスタイルのブラウザでの表示

今使用しているブラウザでどのように表示されるかは、デモページをご覧ください。
2025年5月現在、ほとんどのブラウザでh1, h2, h3, h4のように表示されると思います。

See the Pen
nested h1 browser's default styles by coliss (@coliss)
on CodePen.

変更内容と変更時期

ブラウザのスタイル変更に伴い、Lighthouseなどのページ監査ツールもfont-sizeが定義されていない<h1>要素をバッドプラクティスとして警告するようになります。
以下がその概要です。

<h1>は、<section>, <article>, <aside>などのセクショニング要素に基づいてスタイルを適用しなくなります。UAスタイルシートは<h1>に同じスタイルを適用し、<h2>や<h3>などに降格させるような暗黙的なスタイルは適用しません。
Lighthouseは、<h1>がfont-sizeを設定せずに使用され、<section>, <article>, <aside>に入れ子になっている場合、警告を発します。Lighthouseで注意すべき非推奨の警告はH1UserAgentFontSizeInSectionです。この問題への対処方法については次のセクションで解説します。

変更時期がいつかという点については、各ブラウザは以下のタイムラインで実施される予定です。

Firefox

Firefoxでは2025年3月31日からデスクトップ版のBeta 138のユーザーの50％に、<section>, <article>, <aside>内の<h1>要素のUAスタイルを削除する変更を展開します。その後、4月14日からBeta 138の全ユーザーにこの変更を展開します。予定では、Firefox 138の安定版リリースで5％のユーザーに展開し、その後10％に拡大し、Firefox 140ですべてのユーザーにこの変更が適用される予定です。参考: Bug 1885509
Firefox 136以降、デベロッパーは<section>, <article>, <aside>内の<h1>で作成者が定義したfont-sizeやmarginがない場合は、コンソールに警告が表示されるようになります。参考: Bug 1937568
Firefoxでこの新しい動作をテストするには、about:configでlayout.css.h1-in-section-ua-styles.enabledをfalseに設定してください。

Chrome

Chromeでは136以降、<h1>がデフォルトの小さいfont-sizeを使用している場合、<section>, <article>, <aside>内の<h1>要素に対して非推奨の警告が表示されます。Chromiumで非推奨のマークを付けると、Lighthouseのベストプラクティススコアが下がります。参考: Issue 394111284

Safari

Safariでは、これらの変更についてアナウンスはされていませんが、同等のアップデートが行われると思われます。

Lighthouseによる警告を修正する方法

Lighthouseは最近のアップデートで、<section>, <article>, <aside>内の<h1>要素のfont-sizeを設定していないサイトに対するChromiumのデベロッパーツールの警告に基づくチェックを継承しました。この新しいルールはH1UserAgentFontSizeInSectionと呼ばれ、非推奨の警告が追加された3月以降に表示されます。,

<h1>の警告が表示された場合は、<h1>のfont-sizeとmarginを明示的に設定していることを確認してください。
推奨されるスタイルは、下記の通りです。

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

h1 {

margin-block: 0.67em;

font-size: 2em;

}

<h1>を対象する他のスタイルの上書きを避けるには、:where()を使用すると便利です。

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

:where(h1) {

margin-block: 0.67em;

font-size: 2em;

}

:whereについて詳しくは、下記をご覧ください。

CSSで複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方

このアップデートで留意すべき点

このアップデートで留意すべき点は下記の通りです。

見出しの階層を表現する際に、ブラウザのデフォルトのスタイルに頼らないでください。第2レベルの見出しには<h2>を使用し、第3レベルの見出しには<h3>というようにドキュメント階層を明示的に定義してください。
<h1>要素のfont-sizeとmarginは必ず独自に設定してください。
この変更に合わせて、リセットCSSをアップデートすることを検討してください。
Lighthouseやブラウザのデベロッパーツールでサイトを監査し、非推奨の使用がないかチェックしてください。
HTMLのセクションの見出しについては、MDNのドキュメントで使用上の注意を確認してください。