なぜ、あなたのWebサイトは「ガクッ」と動くのか？インライン要素とフォントが引き起こすCLSの正体
Webサイトを読み込んでいる最中、読みかけの記事が突然ガクッと下にずれて、クリックしようとしていたボタンが指先から逃げていく――。あの忌々しい「レイアウトシフト（CLS）」の経験は、誰しも一度はあるはずです。
「CLS対策なら画像に`aspect-ratio`を指定すればいいんでしょ？」
そう思っているなら、まだ半分です。実は、多くのエンジニアが見落としているのが、「インライン要素のフォント切り替わり」による微細なレイアウトシフトです。
今回は、`span`や`strong`といった何気ないインライン要素が、なぜWebフォントの読み込み前後で牙を剥くのか。そして、それをCSSでどう飼いならすべきか、現場のリアルな知見を共有します。
—
ブラウザの裏側で起きている「フォントの身代わり」
ブラウザはWebフォントが読み込まれるまで、まずはシステムフォント（フォールバックフォント）でテキストを描画します。ここで問題になるのが、「フォールバックフォントとWebフォントでは、同じ`font-size`を指定していても、実際の高さや幅（メトリクス）が微妙に異なる」という事実です。
ブラウザのレンダリングエンジンは、フォントが切り替わった瞬間に「あ、こっちのフォントの方が少し背が高いな」と判断し、要素の高さや行間を再計算します。この「再計算による物理的なサイズの変動」こそが、インライン要素を起点としたレイアウトシフトの正体です。
—
現場で使える「フォント調整」の決定打
この現象を防ぐためのモダンな解法が、`font-size-adjust`と`line-height`の厳密な制御です。
1. `font-size-adjust` でフォントの「背丈」を揃える
`font-size-adjust`は、フォントの「アスペクト比（x-height / フォントサイズ）」を指定するプロパティです。これを使うと、フォールバックフォントからWebフォントに切り替わった際、視覚的な大きさを一定に保とうとします。
2. `line-height` を「単位なし」で指定する
インライン要素の行送り（`line-height`）を`px`などで固定するのではなく、単位なしの数値（例：`1.5`）で指定しましょう。これにより、フォントサイズが変化しても行間が相対的に追従し、崩れを最小限に抑えられます。
—
実践コード：レイアウトシフトを封じ込めるCSS
以下のコードは、インライン要素のフォント切り替わりによるガタつきを抑制するためのベストプラクティスです。これをプロジェクトのベーススタイルやコンポーネントに組み込んでみてください。
/ インライン要素のレイアウト安定化用クラス /
.text-stabilized {
/
1. font-size-adjust:
フォールバックフォントとWebフォントの高さ比率を合わせることで、
切り替わり時のガクつきを劇的に軽減します。
（0.5前後は多くの欧文フォントの平均値）
/
font-size-adjust: 0.5;
/
2. 単位なしのline-height:
行の高さを親要素のフォントサイズに対して相対的に保ちます。
フォントが入れ替わっても計算式が維持されるため、高さの急変を防ぎます。
/
line-height: 1.5;
/
3. font-display: swap の併用:
これが大前提です。フォント読み込み中はテキストを表示しつつ、
読み込み完了後にスムーズに差し替えるよう設定します。
/
font-display: swap;
}
/
特定のインライン要素（strongなど）で微妙な太さの違いによる幅の広がりを防ぐ
/
strong {
/
太字になった瞬間に親要素の幅を広げないための工夫。
テキストシャドウを使って擬似的に太く見せる手法も有効ですが、
まずはfont-synthesisでブラウザの自動太字生成を制御します。
/
font-synthesis: none;
font-weight: 700;
}
—
シニアからのアドバイス：完璧を目指しすぎないこと
最後に、現場のリアリティを一つ。
`font-size-adjust`は非常に強力ですが、全てのフォントに対して完璧な数値を見つけるのは至難の業です。一番の対策は、「フォールバックフォント（`font-family`の指定）」を、Webフォントとメトリクスが近いもの同士で組み合わせることです。
たとえば、`Helvetica`を使うならフォールバックにも`Arial`を置く。こういった「フォントファミリーの選定」という上流の設計と、今回紹介したCSSによる「微調整」を組み合わせることで、初めてユーザーに「違和感ゼロ」の体験を提供できます。
完璧なCSSを書いて終わりではありません。実際に低速回線でシミュレーションし、ブラウザのデベロッパーツールで「Layout Shift」を監視し続ける。その地道な姿勢こそが、最高峰のフロントエンドエンジニアへの近道です。
さあ、あなたのコードから「ガクッ」を一つずつ消し込んでいきましょう。応援しています。
コメント