「State of CSS 2025」でCSS機能の進化を知る。認知度、評価、ブラウザ互換性を比較

「新発見！フロントエンド技術の今」の連載。第18回のテーマはCSSの最新トレンドです。ここでは、2025年8月に公開されたばかりのCSSに関するサーベイ「State of CSS 2025」を俯瞰しながら、注目の機能をピックアップして紹介します。

• keyboard_arrow_down State of CSSとは
• keyboard_arrow_down データで見る機能の「定番」と「注目株」
• keyboard_arrow_down 開発者の「悩み」が集まる、使いこなしが難しい機能
• keyboard_arrow_down 回答者の8割が「聞いたことがない」最新機能
• keyboard_arrow_down おわりに

State of CSSとは、CSSエコシステムの最新動向を調査・分析し、世界中の開発者に共有するための年次レポートです。本連載では、これまでも「モダンCSS」（第5回）、「CSSフレームワーク」（第10回）でこのサーベイの結果を引用してきました。

最新のサーベイの結果は、2025年8月に2025年版として公開されました。全体の構成は2024年版から大きく変わらないのですが、今回は、「Features」（機能）に新しいサーベイ「Features Over Time」（時間経過で追う機能）と、機能カテゴリごとに問題点をリサーチした「Layout Pain Points」などが新しく登場しました。

まずは、全体を俯瞰するのに最適な全機能（All Features）と時間経過で追う機能（Features Over Time）です。これらは、大まかな状況を把握する場合に最適です。

全機能（All Features）

すべての機能を俯瞰できるサーベイです。自分の関心のある機能がどれほど使われていて、どのように評価されているかを見るのに適しています。

「Experience」（経験の有無）「Sentiment」（好き嫌い）において注目すべき機能として、サーベイのコメントでは「:has()」「subgrid」「aspect-ratio」がピックアップされています。順位上は他にも注目すべき機能はありますが、これらの機能は「Experience」と「Sentiment」にまたがり、高い評価を受けていることから取り上げられたのでしょう。筆者は、それぞれ以下の点が有用であると評価されたと推量します。

いずれもBaselineステータス（※）はWidely AvailableかNewly Availableとなっており、ブラウザのサポートも安定して安心して使える点も大きいでしょう。なお、「subgrid」は認知（「Experience」の「Heard」）は高いにもかかわらず、利用経験（同じく「Usage」）は25位となっています。回答者のコメントを見ると、利用する機会がない、機能が難しいといった声が見られるので、魅力的な機能と感じつつも、利用には及んでいないといった理由が考えられます。
※Web標準の機能のブラウザ互換性を示す指標。詳しくは第17回で紹介。

時間経過で追う機能（Features Over Time）

「Features Over Time」は、経年変化を見るサーベイです。「Usage」（使ったことがある）など、いくつかのタブに分かれていて、それぞれの基準でのランク推移をグラフで確認できます。また、グラフは「Top Items」（上位）などの基準で並び替えたり、「Layout」や「Shape & Graphics」などのカテゴリ分けでフィルターして見たりすることができます。

ただし、2024年版と2025年版の2年だけの集計となっているので、長期のトレンド変化を読み取るのは難しそうです。来年版以降でも続けてもらうことを期待しましょう。

「Usage」（利用率）の伸び幅に着目すると、最大は「text-wrap: pretty」プロパティとなっています（＋17％）。text-wrapはテキストの回り込み方法を指定するプロパティですが、prettyは比較的新しいサポートであり、Firefoxではサポートされていません（Limited Availability）。基本的な動作は回り込みを行うwrapと同様ですが、オーファン（下記NOTE参照）を最小化するためのアルゴリズムを採用しているなど、組版の精度を向上させたい場合に使用されます。

「Awareness」（認知度）の伸び幅では、最大は「light-dark()」です（＋23％）。light-dark関数は、2024年にNewly Availableとなったばかりの新しい機能で、まだ実験的な位置付けです。OSやブラウザのカラーテーマ（ライト、ダーク）によって、2色からの選択肢を提供します。この関数により、以下の例のように暗いテーマでは明るい色、明るいテーマでは暗い色といったように、ピンポイントでのカラー選択を柔軟に行うことができます。

:root {
  color-scheme: light dark;	/* color-schemeの指定が必須 */
}
body {
  color: light-dark(darkgray, lightgray);	/* light, darkの順 */
  background-color: light-dark(lightgreay, darkgray);
}

▲リスト：light-dark関数の使用例

以降の「カラーの問題点」「タイポグラフィの問題点」も合わせて見ると、これらの機能に関心が高い理由が分かります。

「～Pain Points」となっているサーベイは、使いこなしに苦労するCSS機能をカテゴリごとに挙げてもらったものです。ネガティブなサーベイと見ることもできますが、逆にその機能への関心が高いと見ることもできるでしょう。ここからは、この「問題点」（Pain Points）サーベイについて以下の4項目に注目して紹介していきます。

• 1. レイアウト上の問題点（Layout Pain Points）
• 2. カラーの問題点（Colors Pain Points）
• 3. インタラクションの問題点（Interactions Pain Points）
• 4. タイポグラフィの問題点（Typography Pain Points）

1. レイアウト上の問題点（Layout Pain Points）

「レイアウト上の問題点」（Layout Pain Points）は、レイアウト技法における問題点のサーベイです。

これを見ると、CSSグリッド（Grid）やフレックスボックス（Flexbox）の使いこなしに難ありという声が多いようです。両者とも、複雑なレイアウトをシンプルなマークアップとスタイル指定で可能にしてくれる優れものですが、それ故に機能の使いこなしや、細かな調整に苦労するといった局面が多いように思えます。

たとえばGridは2次元のレイアウトを表すのに便利ですが、機能の豊富さに伴うプロパティの多さが習得のハードルを上げてしまっているという問題が指摘されます。Flexboxも、1次元のレイアウトに強力な機能を提供してくれますが、揃え（アラインメント）の指定方法が豊富で最適なプロパティを決めにくいこと、レスポンシブレイアウトの下で期待通りにサイズや空きを再現するのが意外と難しいといった問題があります。また、Flexboxは非常に柔軟性が高いので、これでグリッドレイアウトを制作しようとしてレイアウトのコントロールに音を上げるといったこともあります。GridとFlexboxを適材適所で活用し、プロパティの意味をしっかり理解した上で利用することが、GridとFlexboxの使いこなしには有効ではないでしょうか。

2. カラーの問題点（Colors Pain Points）

「Colors Pain Points」（カラーの問題点）は、色の使いこなしにおける問題点のサーベイです。このサーベイで注目なのは、5位の「Wide Gamut Colors」でしょう。

Wide Gamut Colorsとは、いわゆる広帯域カラーのことで、従来のsRGB（standard RGB）を超える色表現を可能にする以下のCSS関数です。

いずれも、2023年にWidely Available化されたばかりの新しい関数で、ブラウザのサポートも進行中という段階です。昨今のディスプレイデバイスの性能向上で広帯域カラーへのニーズが高まっていることを受けて、利用への関心が高い機能といえます。

とはいえ、回答者のコメントにもあるようにFigmaといった著名なデザインツールでサポートされていない、ユーザーにおける利用環境が十分に整っていないなどの問題や、sRGBのような直感的な色指定が難しいことなどの機能的な問題で、満足度は高いとはいえないようです。当面は、サポートブラウザの普及を横目で見つつ、色空間そのものへの理解やツールのサポートなどが進められていくことになると思われます。

3. インタラクションの問題点（Interactions Pain Points）

「Interactions Pain Points」（インタラクションの問題点）は、インタラクション（Webページとの対話機能）における問題点のサーベイです。注目したいのは、4位の「Scroll-driven animations」です。Limited Availabilityではあるものの、「スクロール駆動アニメーション」のブラウザサポートが進むことへの期待が高いことが読み取れます。

スクロール駆動アニメーションとは、時間経過によるアニメーションとは別の、ユーザーのスクロール操作によって発生するアニメーションです。Webサイト「Scroll-driven Animations」は、スクロール駆動アニメーションのデモサイトで、その動きを見るのに最適です。

サイトを訪問し、スクロール操作を行うと分かりますが、スクロールに応じて背景のマウスと矢印のイラストがアニメーションします。新しいアニメーションの手法ということで注目されていることが伺えます。

4. タイポグラフィの問題点（Typography Pain Points）

「Typography Pain Points」（タイポグラフィの問題点）は、タイポグラフィ（文字やフォント）における問題点のサーベイです。タイポグラフィといいながら、トップの「line-height issues」をはじめ、テキストのレイアウトにおける再現性を問題としている結果となっています。注目したいのは3位の「text-box-edge/text-box-trim」と4位の「line-clamp」です。

「text-box-edge/text-box-trim」は、テキスト上下辺のトリミング方法を指定できるようにすることで、テキストの見た目を整えやすくなる新しいプロパティです。通常、レイアウトされるテキストの高さは「レディング」と呼ばれる余白やフォントのデザインによって変わってくるので、見た目を意図どおりに整えることは難しいものです。text-box-edge/text-box-trimプロパティによってテキスト上下辺のトリミング方法を指定できるようになることで、テキストの高さをコントロールしやすくなることが期待されます。具体的な動作イメージとしては、例えば「Playground | MDN」において、「切り取る辺」「上部（先頭）の切り取り値」「下部（末尾）の切り取り値」を切り替えて試してみるとよいでしょう。ただBaselineはLimited Availabilityで、Firefoxなどのブラウザではサポートされていません。

「line-clamp」は、テキストを指定行数で切り取るためのプロパティです。たとえば3行と指定すれば、テキストは3行からあふれる部分は省略され、省略記号（…など）が表示されます。text-box-edge/text-box-trimと同様に、レイアウトを一定に保つために有用なプロパティですが、BaselineはLimited Availabilityで一部のブラウザではベンダープレフィクス付きのサポートとなっています。

なお、このline-clampは、「All Features」のサーベイで利用者のコメントがsubgridに次いで多かったのですが、その中身は意外なほど否定的なものだったようです。回答者のコメントには、Limited Availabilityであるとはいえ長きにわたりベンダープレフィクス（-webkit）が求められる点には否定的な声が多く、早期の標準化が待望されているようです。行の切り捨てそのもののニーズは高いことが、このような強めの反応になったと読み取れます。

▲Features—Reading List（画像出典：https://2025.stateofcss.com/en-US/features/#reading_list）

最後に、「リーディングリスト」（Reading List）についてもまとめておきます。いわゆる、サーベイへの回答時に「後で読みたい」と感じた機能の集計となります。この集計で上位に来るのは、Featuresランキングでは「使ったことがある」「知っている」で下位にくるものなのですが、関心は高いために後で調べておきたいというものです。

ここでは「::target-text」がトップですが、All Featuresでは57位で82.4％の回答者が「聞いたことがない」となっています。Baselineでは2024年におけるNewly Availableとなっていますが、実験的機能と位置付けられており、利用者が限られることから初めて目にする機能ということになったのだと思われます。

::target-textは、BaselineではNewly Availableとなっている新しいCSS疑似要素です。以下のようなURLのscroll-to-textフラグメントで指定されたテキストを、任意のスタイルでハイライト表示するために使われます。

#:~:text=ハイライト表示したいテキスト

URLフラグメントとは、「#」で始まるURLの末尾を構成する要素で、ページ内の位置（アンカー）を指定するものがよく知られています。「#:~:text」はscroll-to-textフラグメントを意味し、「=」以降で指定されるテキストまでスクロールし、さらにハイライト表示することを指定します。::target-text疑似要素を使うと、このテキストのスタイルを自由に指定できます。

今回は、CSSエコシステムのサーベイであるState of CSSの2025年版を、特に機能面に絞って紹介しました。自分の愛用する機能が意外な評価だったり、初めて目にするような機能があったりと、なかなか新鮮なサーベイではなかったでしょうか。サーベイの2026年版登場の折には、改めて紹介する予定です。