Web制作者は要チェック！ スマホでもテキストサイズの拡大縮小ができるようになるなど、Chrome 146で新しく追加された5個のCSSの機能
Post on:2026年3月12日
sponsorsr
3/11にアップデートされたChrome 146に追加された、CSSとUIに関する新しい機能を紹介します。
今回のアップデートで注目すべきは、スクロールの位置に基づいてアニメーションを制御する機能、meta name=text-scale、trigger-scope、text-indentなど、Web制作者は要チェックです！
New in Chrome 146
Chrome 146 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
- はじめに
- スマホでもテキストの拡大縮小ができるようように
- CSSによるスクロールをトリガーにしたアニメーション
- trigger-scopeプロパティ
- タイムラインの名前付き範囲「scroll」
- text-indentプロパティのhangingとeach-lineをサポート
はじめに
3/11にリリースされたChrome 146で5つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 146は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その5つの新しいCSSとUIに関する機能を紹介します。
スマホでもテキストの拡大縮小ができるようように
これまでiOSやAndroidではテキストサイズを変更しても、Webページのテキストサイズに反映されないことがありました。これはブラウザと作成されたコードに依存しており、推奨されるアプローチとは異なります。Chrome 146でmetaに新しくtext-scaleが導入されました。これにより、ユーザーはOSでフォントサイズの設定を大きくした場合に、フォントサイズを大きくできるようになります。
root要素のデフォルトのテキストイズは、OSとブラウザのテキストズームの設定に比例して拡大縮小されます。これにより、フォントの相対単位（rem, emなど）を使ったWebページ（pxなど絶対単位は避けてください）では、ユーザーのOSレベルのズーム設定が尊重されます。また、ブラウザの既存のメカニズム（Windowsの全ページズーム）やヒューリスティック（スマホの自動サイズ調整）も無効になります。
meta name=text-scaleを使用すると、ページでさまざまなユーザーが選択したテキストサイズ設定に対して適切に拡大縮小されていることをブラウザに通知することができます。テキストスケールにアクセスする方法を提供するenv(preferred-text-scale)と同様に、このAPIはroot要素のデフォルトのテキストサイズを使用してスケーリングを有効にし、自動テキストスケーリングを無効化することでこれを拡張します。
また、Safariでは下記のCSSを使用すると、OSの設定に合わせてページのテキストを拡大縮小できます。
|
1 2 3 |
body { font: -apple-system-body; } |
ChromeとSafariの両方で機能するためには、下記のように記述します。
※Firefoxでは特別な記述は必要ありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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はスマホ（タッチデバイスのみ）用に制限したものです。
CSSによるスクロールをトリガーにしたアニメーション
スクロールの位置に基づいてアニメーションを制御（再生・一時停止・リセットなど）する機能が追加されました。
Webページでは、スクロール位置に到達したときにアニメーションを開始するというのが一般的なパターンです。これまではデベロッパーは要素がスクロールコンテナのビューポート内にあることをJavaScriptで検出して、対応するアニメーション（要素をスライドさせてビューに表示するなど）を実装していました。
このようなユースケースの多くは、宣言的に提供できる情報に依存しています。しかし、今回の機能により、デベロッパーはCSSでこれらのインタラクションを実装できるようになり、ユーザーエージェントはこの処理をワーカースレッドにオフロードできます。APIにはCSSアニメーションに加え、Webアニメーションにもこの機能を拡張するJavaScriptインターフェイスも含まれています。
たとえば、スクロールをトリガーにして複数のフォームを実装することもできます。
※Chrome 146+でご覧ください。サポートされていないブラウザ用のフォールバック（JavaScript）も含まれています
See the Pen
スクロールをトリガーにしたアニメーション by coliss (@coliss)
on CodePen.
スクロールによってトリガーされるアニメーションのCSSは下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@keyframes card { from { translate: 0 -50% 0; } } @keyframes card-contents { from { opacity: 0; height: 0px; } to { opacity: 1; height: auto; } } .card { overflow-y: clip; /* Hide any overflow in the y-axis */ timeline-trigger: --t view() contain 15% contain 85% / entry 100% exit 0% ; trigger-scope: --t; animation: unclip var(--duration) ease-in-out both; animation-trigger: --t play-forwards play-backwards; } .card > * { interpolate-size: allow-keywords; /* To animate to `height: auto` */ animation: card-contents var(--duration) ease-in-out both; animation-trigger: --t play-forwards play-backwards; } |
trigger-scopeプロパティ
trigger-scopeプロパティを使用すると、デベロッパーはトリガーインスタンス化プロパティで宣言されたアニメーショントリガーの名前を制限することを可能にします。
トリガーインスタンス化プロパティ（たとえば、timeline-trigger）は、animation-triggerプロパティが参照してアニメーションをトリガーに紐付けるための名前を宣言します。ただし、これらの名前はデフォルトではグローバルです（anchor-nameと同じ）。デベロッパーはアニメーションとトリガーの相互作用を分離するために、これらの名前可視性を制限する必要があります。
タイムラインの名前付き範囲「scroll」
この機能はスクロール範囲を追加することで、ビュータイムラインの名前付き範囲のセットを拡張します。
Scroll-driven Animations APIは、ViewTimelineとアニメーションの範囲を定義するViewTimelinesの一部を参照する名前付き範囲を導入しました。
しかし、これまで提供されていた名前付き範囲はすべてのViewTimelineのうちその対象が表示されている部分に限定されていました。デベロッパーはタイムラインの基盤となるスクロールコンテナの全範囲を参照できるようになります。この機能により既存のセット（entry, exit, cover, contain）にスクロール名前付き範囲が追加されます。
Scroll-driven Animationsについては詳しくは、下記をご覧ください。
Scroll-driven AnimationsでCSSでの実装が大きく変わる！ スクロールをトリガーにしたアニメーションを実装する方法
text-indentプロパティのhangingとeach-lineをサポート
text-indentプロパティで2つのオプションキーワードがサポートされ、機能と使いやすさが拡張されます。
|
1 2 3 4 5 |
p { text-indent: 1em hanging; text-indent: 1em each-line; text-indent: 1em hanging each-line; } |
hangingキーワードは、インデントをぶら下げに変更します。ぶら下げとは最初の行を除く、すべての行がインデントされます。
each-lineキーワードは、インデントが最初の行だけでなく、強制改行後の各行にもインデントを適用します。
sponsors
