web制作

Chrome 154でCSSとiframeが進化｜scroll-marker-group・text-decoration-inset・frame-sizingを解説

更新日：2026-10-01 著者：unigram 読了目安：9分

この記事の要点

Chrome 154で追加されたscroll-marker-group、text-decoration-inset、レスポンシブiframeを実装目線で整理します。従来との違いや使い方、料金、導入時の注意点を確認できます。

この記事を読むと、Chrome 154で追加されたCSS（Webページの見た目を指定する仕組み）とiframe（別ページを埋め込む枠）を、どこで試し、何に注意して導入すればよいか分かるようになります。新機能の使い方や未対応ブラウザーが不安な方でも、この手順通りに小さく試せば大丈夫です。

PR 本ページにはプロモーションが含まれています。Chrome 154の安定版は2026年9月22日に公開されました。今回のアップデートでは、ページ内ナビゲーション（ページ内の移動を助ける案内）、リンク下線、iframeのサイズ制御に関わる機能が追加されています。

実際に検証してみると、見た目を整えるだけでなく、これまでJavaScript（ページの動きを制御するプログラム）や個別のレイアウト調整に頼っていた部分を、CSSやiframeの仕組みで整理しやすい点が印象的でした。一方で、最初の壁は「指定を書けばすぐ見える」とは限らないことです。対象となるHTML（ページの骨組み）や埋め込み文書の構造を確認してから試す必要があります。

Chrome 154で追加された主な機能

機能	できること	期待できる効果
scroll-marker-group	スクロールに連動するマーカー（現在位置を示す目印）をlinksまたはtabsモードで扱う	ページ内ナビゲーションやカルーセル（横にスライドする一覧）の操作性を高めやすい
text-decoration-inset	テキスト装飾（下線など）の表示位置を調整する	下線と文字の間隔や、装飾の見え方を細かく整えやすい
frame-sizing: content-height	埋め込み文書の内容に応じてiframeの高さを扱う	固定高による余白や、iframe内部の不要なスクロールバーを抑えやすい

scroll-marker-groupとは

scroll-marker-groupは、スクロール対象のまとまりに対して、移動先を示すマーカーを扱うためのCSS機能です。マーカーは、長いページの目次やカルーセルの現在位置を知らせる小さな目印にたとえると分かりやすいでしょう。

Chrome 154では、linksとtabsの2つのモードが追加されました。linksは、各セクションへの移動先をリンクとして見せたいケースに向いています。長い記事や製品一覧で、現在位置と移動先を視覚的に示す用途が考えられます。tabsは、タブ形式の切り替えUI（画面上の操作部品）に近い見せ方をしたい場合に適しています。

従来は、スクロール位置の監視、現在位置の判定、インジケーター（現在位置を示す表示）の切り替えをJavaScriptで組み合わせることがありました。scroll-marker-groupを使うと、対応するUIの一部をCSS中心で設計できる可能性があります。

実際に使うとこうなる

実際に使うと、スクロールに合わせて「今どの項目を読んでいるか」を示す部分のコードを整理しやすくなります。最初に感じる壁は、マーカーだけを指定しても、対象となるスクロール領域や移動先の構造が合っていないと期待した表示にならない点です。

まずは記事全体ではなく、3つ程度の見出しを持つ検証ページで試すのがおすすめです。表示されないときは、CSSの文法だけでなく、スクロールしている要素が本当に指定した要素か、マーカーの対象が正しく対応しているかを確認します。

基本的な指定イメージ

対象となるスクロール領域に、scroll-marker-group: links;またはscroll-marker-group: tabs;のように指定して利用します。実際の適用では、マーカーの対象となるHTMLの構造、スマートフォンでの表示、キーボード操作（Tabキーなどで操作する方法）を確認してください。

text-decoration-insetで下線を調整

text-decoration-insetは、テキスト装飾の表示範囲を調整するためのCSSプロパティです。リンクの下線を文字幅いっぱいに見せたくない場合や、デザイン上の余白を設けたい場合に役立ちます。

これまでは、border-bottom（要素の下端に線を引く指定）や疑似要素（CSSで追加する見た目の部品）を使って下線を再現し、文字の長さに合わせて位置や幅を調整することがありました。その方法では、行の折り返しやフォント（文字のデザイン）の変更に応じた調整が必要になる場合があります。

実際に使ったときの印象

実際に使うと、リンクの文字そのものに付く下線を調整できるため、見出しやボタン風リンクの微調整がしやすく感じられます。特に、ブランドカラーの下線を少し短く見せたい場面では、疑似要素を別に配置するより意図を読み取りやすくできます。

ただし、最初の壁は「下線の位置を変える指定」と「下線を表示する指定」を混同しやすいことです。text-decoration-insetだけで色や太さまで決まるわけではありません。装飾の色、種類、太さなどは別のtext-decoration関連プロパティ（下線の見た目を指定する項目）と組み合わせて確認します。

レスポンシブiframeとframe-sizing

Chrome 154では、レスポンシブサイズ（画面や内容に応じて変わる大きさ）のiframeが追加されました。frame-sizing: content-height;を使うと、埋め込み文書の内容に応じたサイズ調整に対応できます。

従来のiframeは、外側で高さを固定する設計になりやすく、内容が増えると内部スクロールが発生したり、反対に余白が残ったりすることがありました。埋め込み側の内容に合わせて高さを扱えるようになることで、フォーム、予約画面、外部サービスの説明ページなどを組み込みやすくなると考えられます。

実際に使うときの注意点

実際に使うと、短い埋め込み内容では余計な空白が減り、ページ全体が自然につながって見えます。一方で、後から画像やエラーメッセージが追加されると、親ページ（iframeを置く側）のレイアウトが動くことがあります。

また、iframeの高さが変わることと、埋め込み先のアクセス権限や通信制限が解決することは別です。クロスオリジン（異なるドメイン間）の制限、埋め込み禁止設定、遅れて読み込まれる画像などは、frame-sizingだけでは解決しません。

指定のイメージ

iframeに対してframe-sizing: content-height;を指定し、埋め込み文書の内容に応じたサイズ調整を利用します。実装時は、内容が変化するケース、長文になるケース、画像やフォームを含むケースを確認してください。

最新情報をリアルタイムで発信できる【デジタルサイネージ】

超簡単！自分で「凄いバナー」が作れる！【バナープラス】

1億点超の素材を業界最安水準で。日本人画像も豊富【イメージマート】

従来の方法や他のツールとの違い

目的	従来の方法	Chrome 154の機能	注意点
スクロール位置の表示	JavaScriptでスクロール量を監視し、クラスを切り替える	scroll-marker-groupでCSS中心に構成しやすい	HTMLの対応関係とブラウザー対応を確認する
リンクの下線	border-bottomや疑似要素で線を作る	text-decoration-insetで装飾自体を調整する	下線の色や太さは別途指定する
iframeの高さ	固定値、JavaScript、外部ライブラリ（便利な機能をまとめたコード）	frame-sizing: content-heightで内容に応じて扱う	埋め込み先の制限や内容変化は別に確認する

JavaScriptやライブラリが不要になるわけではありません。複雑な状態管理（画面の状態を覚えて切り替える処理）、古いブラウザーへの対応、アクセス解析（利用状況を調べる仕組み）が必要なら、従来の方法が適する場合もあります。新機能は「すべてを置き換えるもの」ではなく、コードを減らせる部分に使う選択肢です。

何が重要なのか

スクロール位置に連動するUIを、CSS中心で設計できる可能性がある
リンク下線の調整で、疑似要素や独自の装飾に頼る場面を減らせる
iframeの高さを固定値だけで管理しない選択肢が増える
見た目だけでなく、アクセシビリティ（誰でも使いやすくする考え方）やキーボード操作も検証する必要がある

使い方と導入手順

ここでは、無料の検証ページとChromeの開発者ツール（ページの構造やCSSを確認する機能）を使う手順を紹介します。いきなり本番ページを書き換えず、まずは小さなサンプルで試してください。

Chrome 154を起動し、画面右上の三点メニューをクリックします。
メニュー内の「ヘルプ」にマウスポインターを合わせ、「Google Chromeについて」をクリックします。
表示された画面でバージョンを確認し、更新が表示された場合は画面内の更新ボタンを押します。再起動を求められたら、作業中のタブを保存してから再起動します。
手元の検証用HTMLファイルをChromeで開きます。画面上で右クリックし、表示されたメニューから「検証」をクリックして開発者ツールを表示します。
開発者ツール左上の矢印アイコンをクリックし、ページ上のスクロール領域、リンク、iframeのいずれかをクリックします。
開発者ツール右側の「Styles」欄（適用中のCSSが表示される場所）で、空いている行をクリックします。
scroll-marker-group、text-decoration-inset、またはframe-sizing: content-height;を1つずつ入力し、チェックが外れたり警告が出たりしないか確認します。
画面上部の更新ボタンを押し、スクロール、リンクの下線、iframeの高さが意図した状態になるか確認します。
開発者ツール上部の端末アイコンをクリックし、スマートフォン表示に切り替えます。幅を狭くした状態で、文字の折り返し、横スクロール、iframe周辺の余白を確認します。
ページ内をクリックせずにTabキーを数回押し、マーカーやリンクにキーボードだけで到達できるか確認します。文字を拡大した状態でも内容が隠れないか確認します。

最初の一歩では、3つの機能を同時に入れないことが大切です。まず下線だけ、次にスクロールマーカー、最後にiframeという順で追加すると、問題が起きた場所を特定しやすくなります。変更前のCSSを手元のメモ帳（キャッシュのような一時保存場所）にコピーしておくと、すぐ元に戻せます。

初心者がつまずきやすいポイント

scroll-marker-groupと通常のスクロールバーを混同する：scroll-marker-groupは移動先を示す仕組みで、スクロールバーの色や太さを変える指定ではありません。
linksとtabsを見た目だけで選ぶ：リンクとして移動するのか、タブのように現在の項目を切り替えるのか、操作の意味から選びます。
text-decoration-insetをborder-bottomと同じだと思う：前者はテキスト装飾の調整、後者は要素の境界線です。行の折り返し時の見え方が異なる場合があります。
frame-sizingだけでiframeの問題がすべて解決すると考える：埋め込み先の通信、権限、画像の読み込み、動的な内容変更は別の確認が必要です。
未対応環境を確認しない：新しい指定が効かなくても、本文、リンク、埋め込み内容が使えるフォールバック（代替表示）を用意します。
見た目だけで合格にする：キーボード操作、拡大表示、色に頼らない情報伝達、スクリーンリーダー（画面の内容を読み上げるソフト）での確認も行います。

料金はかかる？

Chrome 154の公式発表では、今回紹介したCSSやiframe機能について個別の利用料金は案内されていません。ブラウザーの更新や検証ページの作成自体は、一般的な開発環境で無料で試せます。

ただし、実装・検証にかかる作業コストは必要です。外部サービスをiframeで埋め込む場合は、そのサービス側の契約条件、通信量、利用制限などが別途関係する可能性があります。

向いている人・向いていない人

向いている人

カルーセルやタブのナビゲーションを整理したいフロントエンド開発者（Web画面の実装を担当する人）
リンク下線をブランドデザインに合わせたいWeb制作者
iframeの固定高や内部スクロールを見直したい担当者
JavaScriptに依存する範囲を減らしたいチーム
まず検証ページを作り、対応ブラウザーを確認してから導入できる人

向いていない人

幅広いブラウザーで同一表示を最優先する人
既存環境の動作確認をせずに本番導入したい人
iframeの内容や埋め込み先を管理できない人
アクセシビリティやキーボード操作の確認に時間をかけられない人
JavaScriptや既存ライブラリを一度にすべて廃止したい人

注意点

新機能を使う場合でも、未対応環境でページの基本機能が失われない設計が必要です。特にscroll-marker-groupは、マーカーが表示されない場合でも本文の移動や情報の読み取りができるようにします。

text-decoration-insetは装飾の調整が目的です。色や下線だけに依存した情報設計は避け、リンクであることが文字や操作でも分かるようにします。

frame-sizing: content-heightでは、埋め込み内容の増減によって周囲のレイアウトが変わる可能性があります。広告や固定要素との重なり、ページ全体の移動量、読み込み途中の表示崩れも確認しましょう。

FAQ

Chrome 154はいつ公開された？

安定版は2026年9月22日に公開されました。

scroll-marker-groupは何に使う？

スクロール対象の移動先を示すマーカーを扱うために使います。Chrome 154ではlinksとtabsの2モードが追加されています。

iframeの高さを自動で調整できる？

frame-sizing: content-heightにより、埋め込み文書の内容に応じたサイズ調整に対応できます。ただし、実装前に対象環境と埋め込み内容を検証してください。

既存のJavaScriptやCSSは不要になる？

すべてが不要になるわけではありません。対応環境、デザイン、アクセシビリティ、フォールバックの要件に応じて、従来の実装と使い分ける必要があります。

まとめ：今日からできること

Chrome 154のscroll-marker-group、text-decoration-inset、frame-sizing: content-heightは、ページ内ナビゲーション、リンク下線、iframeの高さ調整を見直すきっかけになります。実際に使うとコードを整理しやすい場面がある一方、構造や対応環境を確認しないと表示されない、または操作性が落ちることがあります。