Chrome 146新CSS速報！スマホの文字サイズ対応とスクロールアニメがWeb制作を変える

Web制作者必見！Chrome 146で何ができるようになる？

Web制作者の皆さん、こんにちは！Web制作とAI開発の最前線を追いかけるエンジニアの〇〇です。
2026年3月11日にアップデートされたChrome 146に、Web制作の常識を覆すかもしれない5つのCSSとUIに関する新機能が追加されました。特に注目すべきは、今までデベロッパーを悩ませてきた「スマホでのテキストサイズ調整」と、リッチなUI/UXを実現する「CSSによるスクロール連動アニメーション」です。
今回のアップデートは、Android、ChromeOS、Linux、macOS、WindowsのChrome 146に適用されます。これは見逃せません！

スマホのテキストサイズ拡大縮小がより正確に！

これまで、iOSやAndroidでは、ユーザーがOSレベルで設定したテキストサイズがWebページにうまく反映されないことがありました。これはブラウザやコードの実装に依存する部分が多く、アクセシビリティの観点からも課題とされていました。
しかし、Chrome 146では、新しく<meta name=\"text-scale\">が導入されました！これにより、ユーザーがOSの設定でフォントサイズを大きくした場合、Webページ上のフォントサイズもそれに合わせて適切に拡大縮小されるようになります。
この機能は、remやemといった相対単位でフォントサイズを指定しているWebページで特に効果を発揮します。pxなどの絶対単位は、ユーザーのズーム設定を無視してしまう可能性があるため、引き続き避けるべきです。
また、ブラウザが自動的に行うテキストのサイズ調整（Windowsの全ページズームやスマホの自動サイズ調整）も無効化され、より意図した通りのスケーリングが可能になります。env(preferred-text-scale)と合わせて、ユーザーの選択したテキストサイズ設定にページが適切に拡大縮小されていることをブラウザに通知できるようになるわけです。

CSSでスクロール連動アニメーションが超簡単に！

Webページでは、スクロール位置に応じて要素をアニメーションさせる、いわゆる「スクロールトリガーアニメーション」が一般的な表現手法となっています。これまでは、要素がビューポート内に入ったことをJavaScriptで検出し、アニメーションを制御するのが主流でした。
しかし、Chrome 146のアップデートにより、CSSだけでスクロールの位置に基づいてアニメーションを制御（再生・一時停止・リセットなど）できるようになりました！これはWeb制作者にとって革命的な進化です。これまでJavaScriptで複雑に記述していた処理をCSSで宣言的に記述できるようになるため、開発効率が大幅に向上します。
さらに、この処理をユーザーエージェントがワーカースレッドにオフロードできるため、メインスレッドの負荷が軽減され、よりスムーズでパフォーマンスの高いアニメーションが実現できます。CSSアニメーションだけでなく、Webアニメーションにもこの機能を拡張するJavaScriptインターフェースも含まれています。
例えば、スクロールするたびに複数のフォームが順に表示されるようなリッチなUIも、CSSだけで実装できるようになります。

その他の注目機能もちらり

元記事では詳細な説明は少ないですが、他にも3つの重要な新機能が追加されています。

trigger-scopeプロパティ：スクロールアニメーションが発火する範囲や条件をより細かく指定するために導入されたものと見られます。これにより、特定の要素がビューポートに入った時だけでなく、スクロールコンテナ内の特定の領域に到達した際にアニメーションを開始するといった、より柔軟な制御が可能になるでしょう。
タイムラインの名前付き範囲「scroll」：スクロールアニメーションのタイムライン管理をより柔軟にするための機能と見られます。アニメーションの開始点や終了点を、スクロールの特定の範囲に紐づけることで、より直感的で再利用性の高いアニメーション設計が可能になるでしょう。
text-indentプロパティのhangingとeach-lineをサポート：これはテキストのインデント表現を豊かにする機能です。特に詩や箇条書き、引用文などで、最初の行だけインデントを適用したり、すべての行にインデントを適用したりといった、複雑なテキストレイアウトをCSSのみで実現できるようになるものと見られます。これはタイポグラフィの表現力を大きく向上させるでしょう。

これらの機能も、今後のWebデザインや開発において重要な役割を果たすことが期待されます。

これらの新機能をどう活用する？具体例とメリット

あらゆるユーザーに優しいサイト構築を実現

<meta name=\"text-scale\">の導入は、アクセシビリティの向上に直結します。視覚に障がいのある方や高齢者など、OSのフォントサイズ設定を大きくしているユーザーにとって、Webページのテキストが適切に拡大されることは、サイトの利用体験を大きく改善します。
実装は非常にシンプルです。まずはHTMLの<head>内に<meta name=\"text-scale\" content=\"scale\">を追加します。さらに、Safariとの互換性も考慮するなら、以下のCSSを記述するのがおすすめです。

<meta name="text-scale" content="scale">
<style>
body {
  font : -apple-system-body ;
}
@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
  :root {
    font-size : 100% ;
  }
}
</style>

@supportsブロックは、タッチデバイス（スマホ）に限定した記述となっています。これにより、ChromeとSafariの両方で、OSの設定に合わせたテキストの拡大縮小が可能になります。Firefoxでは特別な記述は不要とのことなので、主要ブラウザでの対応がこれで網羅できますね。

リッチなUI/UXをCSSだけで実現！パフォーマンスも向上

CSSによるスクロール連動アニメーションは、サイトに動きとインタラクティブ性をもたらし、ユーザーのエンゲージメントを高めます。パララックス効果、要素のフェードイン/アウト、スクロール進捗バー、ステップごとのコンテンツ表示など、これまでJavaScriptに頼っていた多くの表現がCSSだけで実現できるようになります。
最大のメリットは、パフォーマンスの向上です。JavaScriptでアニメーションを制御する場合、メインスレッドに負荷がかかり、特に複雑なアニメーションではカクつきが発生することもありました。しかし、CSSで宣言的に記述し、ユーザーエージェントがワーカースレッドに処理をオフロードすることで、よりスムーズで安定したアニメーション体験を提供できます。
元記事にはCodePenのデモが紹介されていますが、例として以下のようなCSSでスクロールアニメーションを記述します。

@keyframes card {
  from { translate: 0 -50% 0; }
}
@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacit... /* 元記事では省略されています */

このような@keyframesと、新しく導入されるスクロールアニメーション関連のCSSプロパティを組み合わせることで、複雑なスクロール連動アニメーションを驚くほど簡単に実装できるようになります。

さあ、今日から試してみよう！どこから始める？

Chrome 146の新機能は、Web制作の未来を大きく変える可能性を秘めています。まずは、あなたの開発環境でこれらの機能を試してみることを強くおすすめします。

Chrome 146 betaをインストールしてみる：
正式リリースを待つのが一番ですが、一足早く体験したい場合はChrome 146 beta版をインストールしてみましょう。Android、ChromeOS、Linux、macOS、Windowsに対応しています。
まずは<meta name=\"text-scale\">から導入を検討：
既存のサイトでも比較的導入しやすく、すぐにアクセシビリティ改善に繋がります。相対単位（rem, em）への移行がまだであれば、この機会に見直す良いきっかけにもなります。元記事のコード例を参考に、簡単なページで試してみてください。
スクロールアニメーションで表現の幅を広げる：
CodePenのデモを参考に、簡単なフェードインアニメーションやパララックス効果から試してみるのがおすすめです。JavaScriptなしでここまでできるのか！という感動をぜひ体験してください。
今後の情報収集も忘れずに：
今回詳細が少なかったtrigger-scopeやタイムラインの名前付き範囲、text-indentの拡張についても、今後の情報に注目していきましょう。新しいCSSの仕様は常に進化しています。