【5/10 毎日1分最新IT・プログラミングニュース】Chrome 148でWeb制作が少しラクに。動画の遅延読み込み、CSS、DevToolsの注目点

Googleは、Chrome 148の提供開始にあわせて、Web開発者向けの新機能を公開しました。今回のポイントは、ページ表示を軽くする機能、CSSの書き方を少し簡単にする変更、そしてDevToolsでの確認・デバッグ改善です。

初心者向けに一言でいうと、Chrome 148は「Webページを作る人が、表示速度・見た目・調査を少し扱いやすくなるアップデート」です。特に、動画や音声を使うページ、レスポンシブデザインを作るページ、アクセシビリティを確認したいページに関係があります。

今日のポイント：
Chrome 148では、video/audioの遅延読み込み、CSSコンテナクエリの改善、 DevToolsのアクセシビリティ確認の強化などが紹介されています。

何が発表されたの？

Chrome for Developersの公式ブログでは、Chrome 148の主な注目点として次の3つが紹介されています。

機能	かんたんな意味	初心者への影響
CSS name-only container queries	コンテナ名だけを使って、CSSの条件分岐を書けるようになる	部品ごとのレスポンシブ対応を考えやすくなる
video/audioのlazy loading	動画や音声を、必要に近づくまで読み込まない指定ができる	ページの初期表示を軽くしやすくなる
Prompt API	ブラウザ上のオンデバイスAIへアクセスするためのAPI	将来的に、WebアプリにAI機能を組み込む選択肢が増える可能性がある

Chrome 148では、<video>や<audio>要素に loading="lazy"を指定できるようになったと説明されています。

これまでも画像の<img loading="lazy">はよく使われてきました。似た考え方で、動画や音声も「画面に近づくまで読み込みを遅らせる」ことで、最初にページを開いたときの通信量や読み込み負荷を減らしやすくなります。

<video controls loading="lazy" width="640">
  <source src="sample.mp4" type="video/mp4">
</video>

たとえば、記事ページの下の方に動画を置いている場合、ユーザーがまだそこまでスクロールしていないのに大きな動画ファイルを先に読み込むと、ページ全体が重くなることがあります。 loading="lazy"は、そうした場面で役立つ可能性があります。

初心者向けの考え方：
「最初に見えないものは、必要になる直前まで読み込まない」という発想です。画像・動画・音声が多いページほど、表示速度の改善につながる可能性があります。

Chrome 148では、CSSのコンテナクエリについて、コンテナ名だけで問い合わせできる変更が紹介されています。コンテナクエリは、画面全体の幅ではなく、部品の入れ物のサイズや条件に応じてCSSを変える考え方です。

従来のレスポンシブ対応では、よく@mediaを使って「画面幅が何px以下ならデザインを変える」と書きます。一方でコンテナクエリは、「このカード部品の幅に応じて変える」のように、部品単位で考えやすいのが特徴です。

従来の考え方：画面全体の幅を見る

ブラウザ幅 → デザイン変更

コンテナクエリの考え方：部品の入れ物を見る

カードの幅 → カード内のデザイン変更

Webサイトの部品化が進むほど、コンテナクエリは重要になります。たとえば、同じ「商品カード」をトップページでは横長、サイドバーでは縦長に表示したい場合、部品側の条件でデザインを切り替えられると管理しやすくなります。

Chrome DevTools 148では、アクセシビリティツリーの表示が正式に実験段階を離れ、 Elementsパネル内でより包括的な表示を使う方向に変更されたと説明されています。

アクセシビリティツリーとは、スクリーンリーダーなどの支援技術がWebページを理解するときに使う情報の構造です。見た目だけでなく、ボタン・見出し・入力欄などが正しく意味づけされているかを確認するうえで役立ちます。

初心者にとっても、これは大事です。なぜなら、HTMLを正しく書くことは、SEOだけでなく、読み上げ環境やキーボード操作への対応にも関係するからです。

今すぐすべてを使う必要はありません。初心者や学習中の人は、次の順番で確認すると理解しやすいです。

区分	内容
現行情報	Chrome 148は公式ブログで提供開始が案内され、複数のWeb開発者向け機能が紹介されています。
恒常情報	ページ表示速度、CSS設計、アクセシビリティ確認は、Web制作で継続的に重要なテーマです。
注意点	新機能はブラウザ対応状況や利用条件を確認してから本番導入する必要があります。特にOrigin Trialや実験的機能は、仕様や挙動が変わる可能性があります。
不明点	各機能がすべての環境で同じように使えるか、また他ブラウザでいつ同等対応されるかは、機能ごとに確認が必要です。