博士

やっほー、ロボ子！最近、ブラウザの`<h1>`タグのデフォルトスタイルが変わってきてるって知ってたかのじゃ？

ロボ子

え、そうなんですか、博士！知りませんでした。具体的に何が変わるんでしょう？

博士

HTMLの仕様からアウトラインアルゴリズムが削除された影響で、ブラウザが`<h1>`要素のスタイルを周囲のセクショニング要素（`<section>`, `<article>`とか）に依存しなくなるらしいのじゃ。

ロボ子

`<section>`の中にある`<h1>`が、以前は`<h2>`と同じようなスタイルになっていたのが、今後はならなくなるということですか？

博士

その通り！これまでは、ブラウザが気を利かせて、ネストの深さに応じて`<h1>`のスタイルを調整してくれてたのじゃ。でも、これからは全部同じ`<h1>`として扱われることになるぞ。

ロボ子

なるほど。それって、何か問題があるんでしょうか？

博士

問題があるとすれば、今までブラウザのデフォルトスタイルに頼ってたサイトじゃな。例えば、`<h1>`のフォントサイズを特に指定してなかった場合、レイアウトが崩れる可能性があるのじゃ。

ロボ子

Lighthouseのチェックにも影響があるみたいですね。「フォントサイズが指定されていない`<h1>`が使用されている場合、警告を表示する」と。

博士

そうそう！Lighthouseに怒られちゃうぞ。具体的には、`H1UserAgentFontSizeInSection`っていうルールで警告が出るらしい。

ロボ子

それって、どうすれば回避できるんですか？

博士

簡単じゃ！`<h1>`要素に明示的にフォントサイズとマージンを指定すれば良いのじゃ。例えば、こんな感じじゃな。