ろぼいんブログ
更新：

h1要素のブラウザーのデフォルトのスタイルが変更へ

section要素でネストされた4つのh1要素の新しいUAスタイル

ブラウザーは、ネストされたセクション見出しに対するデフォルトのUAスタイルの変更を展開し始めています。開発者は、予期しない結果やLighthouseチェックの失敗を避けるために、特定のケースでUAスタイルに依存していないことを確認する必要があります。この記事では、今後の変更内容、それがページにとって問題かどうかを識別する方法、そして適合したよりよい構造のWebサイトにするためのヒントを紹介します。

変更点

HTML仕様はかつて、 <h1> 要素に対して、それがどれだけ多くのセクショニング要素（ <section> 、 <aside> 、 <nav> 、 <article> ）にネストされているかにもとづいて、暗黙的な意味的見出しレベルを与えるアウトラインアルゴリズムを定義していました。

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

一般的に、これは開発者がどこで<h1>要素を使えるかについて混乱を生じさせ、ツールはHTMLを異なる方法で処理したため、アウトラインアルゴリズムは問題のあるものとみなされました。アウトラインアルゴリズムは 2022年にHTML仕様から削除 されましたが、UAスタイルシートのルールは依然として残っています。デフォルトスタイル内のこれらのルールが現在、ブラウザーベンダーによって削除され始めています。

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
/* 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>

古いUAスタイルでは次のように表示されます。

section要素でネストされた4つのh1要素の古いUAスタイル

新しいUAスタイルではこのような見た目になります。

section要素でネストされた4つのh1要素の新しいUAスタイル

あなたのブラウザーのデフォルトのスタイルが適用された前述のHTMLの例を次に示します。

予想されることとその時期

ブラウザースタイルの変更と並行して、Lighthouseのようなページ監査ツールは、font-sizeが定義されていない<h1>をバッドプラクティスとしてフラグ付けするようになっています。予想されるおもなポイントを次に示します。

  • <h1>は、<section>、<article>、<nav>、<aside>などの周囲のセクショニング要素にもとづいてスタイルを適用しなくなります。UAスタイルシートは<h1>に対して、<h2>、<h3>などに一致するような暗黙的なスタイルではなく、まったく同一のスタイルを適用するようになります
  • font-sizeを指定せずに<h1>が使われている場合、Lighthouseは警告を表示します。注目すべきLighthouseの非推奨警告は H1UserAgentFontSizeInSectionです。対応方法については次のセクションで説明します

これらの変更は、次のタイムラインで各ブラウザーに展開されます。

Firefox

  • 2025年3月31日より、Firefoxはデスクトップ版でarticle、aside、nav、sectionにおけるh1のUAスタイルを削除する変更を、 Beta 138 ユーザーの50%に展開しています。安定版のFirefox 138では5%のユーザーに展開し、50%まで増加させた後、Firefox 140ですべてのプラットフォームに展開する計画です。 bug 1885509 参照
  • Firefox 136以降、開発者はarticle、aside、nav、section内で、作者が定義したfont-sizeやマージンがないh1に対してコンソール警告を確認できます。 bug 1937568 参照
  • Firefoxで新しい動作をテストするには、about:configでlayout.css.h1-in-section-ua-styles.enabledをfalse に設定してください

Chrome

  • バージョン136以降、Chromeは4つの要素内の<h1>に対して、デフォルトの小さいフォントサイズを使用している場合に非推奨警告を表示します。Chromiumで非推奨とマークされると、Lighthouseの「ベストプラクティス」スコアが低下します。 issue 394111284 参照

Safari

Lighthouseの警告を修正する方法

Lighthouseは最近、<h1>要素にfont-sizeが指定されていないサイトに対して、ChromiumのDevTools警告にもとづいた チェックを継承しました 。新しいルールはH1UserAgentFontSizeInSectionと呼ばれ、非推奨警告の追加にともなって3月から表示されるようになっています。<h1>警告が表示された場合は、<h1>に明示的にフォントサイズとマージンを適用していることを確認してください。推奨されるスタイルは次のとおりです。

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

<h1>を対象とするほかのスタイルルールを上書きしないようにするには、 詳細度 がゼロの :where() を使用できます。

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

見出し要素のMDNページには現在、 上記のメモ が記載されており、開発者がこの情報を確認できるようになっています（訳注：記事公開時点で日本語版のMDNにはまだ反映されていない）。

まとめ

覚えておくべきポイントは次のとおりです。

  • デフォルトのブラウザースタイルに依存して見出し階層を伝えないでください。2番目のレベルの見出しには<h2>、3番目には<h3>を使用することで、文書の階層を明示的に定義してください
  • <h1>要素には常に独自のfont-sizeとmarginを定義してください
  • 今回の変更を考慮してCSSリセットの更新を検討してください
  • Lighthouse やブラウザーの DevTools を使用してサイトを監査し、非推奨の使用法がないか確認してください
  • MDNのHTMLセクション見出しに関する メモ を確認してください

“Default styles for h1 elements are changing | MDN Blog”  by Simon Pieters, licensed under  CC-BY-SA 2.5  / translated into Japanese by ろぼいん

#CSS#Web開発#プログラミング#解説

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事