Chrome 148でWeb制作が変わる！コンテナクエリ進化と動画遅延読み込みで開発効率UP
Web制作者必見！Chrome 148でCSSの未来が加速する
皆さん、こんにちは！Web制作とAI開発の最前線を追いかけるエンジニアの〇〇です。
今回は、2026年5月6日にリリースされたChrome 148のアップデートが、Web制作にどんな影響を与えるのか、そしてどんな新しい可能性を秘めているのかを深掘りしていきましょう。
今回のアップデートは、Web制作者にとって見逃せない機能が盛りだくさん。特にコンテナクエリの進化や、動画・音声の遅延読み込み対応は、日々の開発を劇的に効率化し、ユーザー体験を向上させるポテンシャルを秘めています。さっそく、その詳細を見ていきましょう！
Chrome 148で何ができるようになるのか
Chrome 148では、Android、ChromeOS、Linux、macOS、Windows向けに、主に7つの新しいCSSとUIに関する機能が追加されました。これらを活用することで、より効率的でパフォーマンスの高いWebサイト構築が可能になります。
- CSSにおけるコンテナ名のみによるクエリ: これまで必要だった
container-typeの設定なしに、container-nameだけでコンテナクエリが機能するようになります。 - ユーザー操作によるテキストのオーバーフローの切り取り:
text-overflow: ellipsis;が設定されたテキストをユーザーが操作する際、一時的に省略記号表示から切り取り表示に変わり、隠れたコンテンツが見えるようになります。 - dragEnter、dragLeave、dragOverイベントに対してdropEffectを正しく設定する: ドラッグ＆ドロップAPIの
dataTransfer.dropEffect属性が、仕様に準拠した動作をするようになります。 - video要素とaudio要素の遅延読み込み:
video要素とaudio要素にloading属性が追加され、loading=lazyを設定することで、ビューポートに近づくまでリソースの読み込みを遅延できるようになります。 - at-rule()関数: CSSの
@supportsにat-rule()関数が追加され、CSSのat-ruleに対するサポート状況を検出できるようになります。 - revert-ruleキーワード:
revert-layerと同様に、カスケードを前のルールに戻すrevert-ruleキーワードが追加されます。
これらの新機能をどう使えるのか？具体的な活用例
それでは、これらの新機能が日々のWeb制作でどのように役立つのか、具体的な活用例を見ていきましょう。
1. レスポンシブデザインが爆速に！コンテナクエリの簡素化
今回のアップデートで最も注目すべきは、コンテナクエリの進化でしょう。これまで、コンテナクエリを使うには、対象要素にcontainer-type: inline-size;のようなcontainer-typeを設定する必要がありました。
しかし、Chrome 148からは、なんとcontainer-nameを設定するだけでコンテナクエリが機能するようになります！これは、レスポンシブデザインの記述を大幅にシンプルにしてくれます。
これまでのコード（例）:#container { container-type: inline-size; container-name: --foo; }
@container --foo { input { background-color: green; } }
Chrome 148からのコード（例）:#container { container-name: --foo; }
@container --foo { input { background-color: green; } }
たったこれだけの違いですが、これによりマークアップの負担が減り、より直感的にコンポーネントベースのレスポンシブデザインを実装できるようになります。デベロッパーツールでもコンテナクエリが正しくレンダリングされ、リンクできるようになるため、開発中のデバッグもはかどりますね。
2. ページの表示速度とデータ使用量を改善！動画・音声の遅延読み込み
Webサイトのパフォーマンス向上は、常に重要な課題です。特に動画や音声などのメディアコンテンツは、ページの読み込み速度に大きな影響を与えがちでした。
Chrome 148では、<video>要素と<audio>要素にloading属性が追加され、<img>や<iframe>と同様に遅延読み込み（loading=lazy）が可能になります。
<video src="your-video.mp4" loading="lazy"></video>
この一行を追加するだけで、ユーザーがスクロールして動画や音声がビューポートに近づくまで、そのリソースの読み込みが遅延されます。これにより、ページの初期読み込みパフォーマンスが大幅に向上し、ユーザー体験の改善はもちろん、データ使用量の削減にも貢献します。Lighthouseスコアの改善にも繋がりそうですね！
3. ユーザビリティ向上！テキストオーバーフローの改善
text-overflow: ellipsis;は、長いテキストを省略表示する際に便利なCSSプロパティです。しかし、省略された部分がユーザーから見えないため、編集や内容確認の際に不便を感じることもありました。
今回のアップデートでは、text-overflow: ellipsis;が設定されたテキストをユーザーが操作（編集やキャレットナビゲーションなど）すると、一時的に省略記号表示から切り取り表示に替わるようになります。これにより、非表示になっていたオーバーフローコンテンツがユーザーに表示され、操作できるようになります。これは、特に編集可能な要素や、ユーザーがテキストを選択してコピーするような場面で、地味ながらも大きなユーザビリティ向上に繋がります。
その他の機能でCSSの表現力がさらにアップ
- ドラッグ＆ドロップAPIの仕様準拠:
dataTransfer.dropEffect属性が仕様通りに動作するようになることで、より安定したドラッグ＆ドロップインターフェースを実装できるようになります。 at-rule()関数とrevert-ruleキーワード: これらの機能は、CSSの柔軟性をさらに高めます。@supports内で特定のat-ruleのサポート状況を検出したり、条件付きルールで特定のCSSプロパティを簡単に前のルールに戻したりできるようになるため、複雑なスタイル管理やプログレッシブエンハンスメントの戦略を立てる際に役立つでしょう。
試すならどこから始めるか
Chrome 148は既にリリースされているので、これらの新機能はあなたの開発環境で試すことができます。
- まずはコンテナクエリから:
container-typeなしでcontainer-nameだけで機能するようになったコンテナクエリは、既存のコンポーネントのレスポンシブ対応を見直す良い機会です。シンプルな記述で、より柔軟なレイアウトを実現できるか試してみましょう。 - 動画・音声の
loading=lazyを実装: 既に<img>や<iframe>で遅延読み込みを導入しているサイトであれば、<video>や<audio>にもloading="lazy"を追加するだけです。ページの表示速度改善効果はすぐに確認できるはずです。
デベロッパーツールもこれらの新機能のデバッグをサポートしているので、積極的に活用して、新しいCSSの可能性を体験してみてください。
Chrome 148のアップデートは、Web制作者がより効率的でパフォーマンスの高い、そしてユーザーフレンドリーなWebサイトを構築するための強力なツールを提供してくれます。ぜひ、ご自身のプロジェクトでこれらの新機能を試して、そのメリットを実感してください！
