2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: CSSのワークフローがより便利になる新機能編
Post on:2025年12月23日
sponsorsr
2025年のCSSの新機能のまとめは、いよいよ最終回。
今回はCSSのワークフローがより便利になる新機能が盛りだくさんです！
attr()関数の進化- テキストの配置をより細かく制御できる
text-boxプロパティ - ついにCSSで使えるようになった
if()関数 - 関数を自分で定義できる
@function - スタイルクエリと
if()における範囲構文 width: 100%;より便利なstretchキーワード
など、2026年はこれらの機能を使用していきたいですね。
CSS Wrapped 2025 -Google Blog
CSS Wrapped 2025
下記は各ポイントを意訳したものです。
※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
- はじめに
- エルゴノミクス: CSSのattr()関数がパワーアップ
- エルゴノミクス: ターゲットの切り替えの原因となった要素を特定
- エルゴノミクス: text-boxでテキストを垂直方向に中央揃えに
- エルゴノミクス: レスポンシブな図形のためのshape()関数
- エルゴノミクス: CSSでついにif()関数が使えるようになりました
- エルゴノミクス: CSSで関数を自分で定義できるカスタム関数@function
- エルゴノミクス: スタイルクエリとif()における範囲構文
- エルゴノミクス: width: 100%;より便利なstretchキーワードが使えるように
- エルゴノミクス: 角丸以外にもさまざまな形にできるcorner-shape
はじめに
コンポーネント編、インタラクション編に続いて、このエルゴノミクス編では、CSSのワークフローがより直感的になった新機能を紹介します。
インターフェイス、機能、そしてデザインを原子レベルまでCSSで再定義することができます。
エルゴノミクス: CSSのattr()関数がパワーアップ
CSSのattr()関数はHTML属性の値をCSS内で使用できる機能ですが、その機能がパワーアップしました。
これまではattr()は疑似要素のcontentプロパティ内でのみ使用可能で、CSS文字列として値を返すことができました。パワーアップしたattr()関数ではカスタムプロパティを含むあらゆるプロパティで使用可能になり、さらに属性値を文字列だけでなく、カラー・長さ・カスタム識別子など、さまざまなデータ型を解析できるようになりました。
attr()関数の新機能を使用すると、data-color属性に基づいて要素のcolorプロパティを設定し、フォールバック付きの<color>型として解析することもできます。
|
1 2 3 |
div { color: attr(data-color type(<color>), red); } |
ほかにも、一般的なUIの課題を解決するために、複数の要素に対して動的にview-transition-nameを設定できます。その際、要素のid属性を<custom-ident>として解析することができます。これにより、各要素ごとにCSSのルールを重複して記述する必要がなくなります。
|
1 2 3 4 5 |
.card { /* card-1, card-2, card-3, etc. */ view-transition-name: attr(id type(<custom-ident>), none); view-transition-class: card; } |
さらに、attr()関数を複数の方法で使用する方法を紹介します。まず、data-rating属性を使用して、スターを視覚的に塗りつぶして評価を表示します。次に、同じデータ属性をcontentプロパティで使用し、疑似要素に値を挿入します。
|
1 2 3 4 5 6 7 8 9 |
.star-rating { --percent-fill: calc(attr(data-rating type(<number>)) * 20%); /* hard breakpoint gradient background */ background: linear-gradient(to right, gold var(--percent-fill), transparent var(--percent-fill)); &::after { content: attr(data-rating); } } |
実際の動作は、デモページをご覧ください。
See the Pen
CSS Wrapped 2025: attr() by coliss (@coliss)
on CodePen.
attr()関数のパワーアップをさらに詳しくは下記をご覧ください。
CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
エルゴノミクス: ターゲットの切り替えの原因となった要素を特定
ポップオーバー、<dialog>、<details>、など要素が切り替えられた場合、どの要素が切り替えの原因になったのかを把握することは重要です。たとえば、ユーザーがCookieバナーを閉じるために「Cookieを受け入れる」ボタンをクリックしたのか、「Cookieを拒否する」ボタンをクリックしたのかを知ることは非常に重要な情報です。
ToggleEventのsource属性は、イベントが発生したトリガーを正確に示します。このsource属性に基づいて、異なるアクションを実行できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="cookiebanner" popover="auto"> <p>Would you like a cookie?</p> <button id="yes" commandfor="cookiebanner" command="hide-popover">Yes</button> <button id="no" commandfor="cookiebanner" command="hide-popover">No</button> </div> <script> const $btnYes = document.getElementById('yes'); const $btnNo = document.getElementById('no'); const $cookiebanner = document.getElementById('cookiebanner'); $cookiebanner.addEventListener('toggle', event => { if (event.source == $btnYes) { // Give the user a cookie } else if (event.source == $btnNo) { // Don't give the user a cookie } }); </script> |
実際の動作は、デモページをご覧ください。
See the Pen
CSS Wrapped 2025: ToggleEvent.source by coliss (@coliss)
on CodePen.
エルゴノミクス: text-boxでテキストを垂直方向に中央揃えに
フォントのコンテンツボックスは内部メトリックスによって定義されます。具体的には、アクセントとぶら下がり文字用のスペースを確保するアセント（Ascender line）とディセント（Descender line）です。
Source: Material Design
ラテン文字（英語など）の視覚的な境界はアセントとディセントではなく、キャプハイト（Cap height）とベースライン（Baseline）であるため、コンテナ内で数学的に中央に配置しても、視覚的には中央からずれているように見えます。
Source: Material Design
text-boxプロパティを使用すると、テキストの垂直方向の配置がより細かく制御でき、テキストを垂直方向に中央揃えできます。text-box-trimプロパティはトリミングする面（上または下、あるいは両方）を設定でき、text-box-edgeプロパティはtext-box-trimで使用するメトリックを設定できます。
両端をトリミングし、上端のメトリックをcapに、下端をalphabeticに設定すると、テキストは視覚的に中央揃えになります。
|
1 2 3 |
h1, button { text-box: trim-both cap alphabetic; } |
実際の動作は、デモページをご覧ください。
See the Pen
CSS Wrapped 2025: text-box by coliss (@coliss)
on CodePen.
エルゴノミクス: レスポンシブな図形のためのshape()関数
新しいshape()関数を使用すると、CSSで要素を複雑で非多角形のレスポンシブなシェイプをクリップできます。これはclip-path: path()を使用したクリッピングマスクに最適な選択肢です。また、CSSのカスタムプロパティとシームレスに連携して座標や制御点を設定できるため、SVGシェイプよりもメンテナンス性に優れています。さらに、shape()内でカスタムプロパティをアニメーション化することで、動的でインタラクティブなクリッピングも実装できます。
See the Pen
CSS Wrapped 2025: shape() by coliss (@coliss)
on CodePen.
shape()関数で、上端と下端が曲線の旗の形を実装するCSSは下記の通りです。
|
1 2 3 4 5 6 7 8 9 |
.flag { clip-path: shape(from 0% 20px, curve to 100% 20px with 25% 0% / 75% 40px, vline to calc(100% - 20px), curve to 0% calc(100% - 20px) with 75% 100% / 25% calc(100% - 40px), close ); } |
実装のポイントは、水平座標は要素の幅に合わせてパーセントで拡大縮小し、曲線の高さとなる垂直座標は固定のピクセル値を使用します。これにより、要素のサイズに関わらず旗の波が一定に保たれるレスポンシブなエフェクトが実現されています。
別の例として、shape()にプロジェネレーターを使用して、楽しいフレーム効果を実装することもできます。
See the Pen
CSS Wrapped 2025: shape() 2 by coliss (@coliss)
on CodePen.
エルゴノミクス: CSSでついにif()関数が使えるようになりました
CSSのif()関数を使用すると、条件式に基づいてプロパティに異なる値を設定できます。JavaScriptの三項演算子のようなものと考えてください。ただし、スタイルシート向けです。単一のプロパティ変更のために冗長な@mediaや@supportsを複数記述するよりも、動的なスタイル処理をより簡潔かつ明確に実装できます。
構文はシンプルです。if()関数はセミコロンで区切られた条件と値のペアを受け取ります。最初にtrueと評価された条件に対応する値が適用されます。また、フォールバックとなるelse値を設定することもできます。
|
1 |
if(condition-1: value-1; condition-2: value-2; else: fallback-value); |
現在、CSSのif()関数は3種類のクエリで使用できます。
media(): メディアクエリ用supports(): サポートクエリ用style(): スタイルクエリ用
CSSのif()を使用する例として、インラインのメディアクエリがあります。これにより個別の@mediaブロックを記述せずに、異なるビューポートサイズやデバイスの機能に応じてスタイルを設定できます。
たとえば、ビューポートの向きに応じて列から行に変化するレスポンビスなレイアウトも簡単に実装できます。
|
1 2 3 4 |
.responsive-layout { display: flex; flex-direction: if(media(orientation: landscape): row; else: column); } |
CSSのif()で実装することで、スタイルを2箇所で定義する必要がある従来型のメディアクエリよりも簡単です。if()を使用すれば、単一のプロパティに関するロジックを1箇所にまとめられるため、CSSの可読性と保守性が向上します。
実際の動作は、デモページでご覧ください。レイアウトの向きを変更するには、HTMLまたはCSSをクリックしてサイドパネルを開いてください。
See the Pen
CSS Wrapped 2025: if() by coliss (@coliss)
on CodePen.
CSSのif()関数について詳しくは下記をご覧ください。
CSSでついにif elseの条件文が使える！ if()関数の便利な使い方を解説
エルゴノミクス: CSSで関数を自分で定義できるカスタム関数@function
CSSで関数を自分で定義できるカスタム関数@functionが登場しました。組み合わせることが可能で、再利用性も高く、明確な機能的スタイルロジックを記述することが格段に容易になります。カスタム関数は@funciton、二重ダッシュ（--）で始まる関数名、一連の引数、結果ブロックで構成されます。引数にはデフォルト値（フォールバック値）を設定することもできます。
CSSのカスタム関数の基本的な例とし、数値の逆数を返す「negate」関数を紹介します。
|
1 2 3 4 5 6 7 8 9 10 |
/* Negate function returns the negative of a value */ @function --negate(--value) { result: calc(-1 * var(--value)); } /* Usage */ html { --gap: 1em; padding: --negate(var(--gap)); } |
CSSでは関数をさまざまな実装で使用できます。これからも新しい使い方が登場するでしょう。たとえば、複数の関数を含むutils.cssファイルにCSSのユーティリティを格納するといったことが考えられます。
私のお気に入りのCSSの関数の一つは、条件付きで角丸を適用するborder-radiusです。下記のCSSは、要素がビューポートの端から指定距離（デフォルトは4px）以内に近づいた場合にborder-radiusを解除し、それ以外の場合は設定した角丸を適用するというものです。角丸の半径を1つの目の引数に、端からの距離は2つ目の引数に設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Conditionally apply a radius until you are (default: 4px, or specify second argument) from the edge of your screen */ @function --conditional-radius(--radius, --edge-dist: 4px) { result: clamp(0px, ((100vw - var(--edge-dist)) - 100%) * 1e5, var(--radius)); } /* usage */ .box { /* 1rem border radius, default (4px) distance */ border-radius: --conditional-radius(1rem); } .box-2 { /* 1rem border radius, right at the edge (0px distance) */ border-radius: --conditional-radius(1rem, 0px); } |
実際の動作は、デモページをご覧ください。ビューポートの端から指定距離を変更するには、HTMLまたはCSSをクリックしてサイドパネルを開いてください。
See the Pen
CSS Wrapped 2025: @function by coliss (@coliss)
on CodePen.
CSSのカスタム関数 @functionについて詳しくは下記をご覧ください。
CSSの進化がすごすぎる！ CSSで関数を自分で定義できるカスタム関数が使えるようになります
エルゴノミクス: スタイルクエリとif()における範囲構文
今年リリースされた素晴らしいアップデートの一つは、スタイルクエリとif()で範囲構文が使用できるようになったことです。メディアクエリやコンテナクエリではすでにこの機能がサポートされていましたが、Chrome 142以前はスタイルクエリでは値の完全な一致が必要でした。
現在では値を入力し、<, >, <=, >=などの比較演算子で使用できるようになったため、CSSで直接多くの新しいアーキテクチャ機能が実現可能になりました。
下記のデモでは、スタイル化されたカードを使用して毎日の天気を視覚化しています。HTMLには降水確率などのデータが含まれており、data-rain-percentの値で示されています。
|
1 2 3 4 5 6 |
<li class="card-container" style="--cloudy: true;" data-rain-percent="60%"> <div class="weather-card"> <h2>Today's Weather</h2> <p>Chance of rain: 60%</p> </div> </li> |
CSS では、data-rain-percentをカスタムプロパティに変換し、attr()を使用して型を指定してから、範囲スタイルのクエリ内で使用します。
|
1 2 3 4 5 6 7 8 9 10 |
.card-container { container-name: weather; --rain-percent: attr(data-rain-percent type(<percentage>)); } @container style(--rain-percent > 45%) { .weather-card { background: linear-gradient(140deg, blue, lightblue); } } |
範囲クエリはif()文でも使用できるようになりました。これによりスタイルの記述がより簡潔になります。たとえば、上記のCSSはインラインのif()を使用することで、さらに簡潔に記述できます。
|
1 2 3 4 |
.weather-card { background: if(style(--rain-percent > 45%): blue; else: gray; ); } |
実際の動作は、デモページをご覧ください。
See the Pen
CSS Wrapped 2025: range syntax by coliss (@coliss)
on CodePen.
エルゴノミクス: width: 100%;より便利なstretchキーワードが使えるように
stretchキーワードはCSSのサイズ指定プロパティ（widthやheightなど）で使用できるキーワードで、要素が親ブロックの空きスペースにぴったり収まるように拡大・縮小して配置されます。
100%と似ていますが、結果として得られるサイズはbox-sizingで決定されるボックスではなく、要素のマージンボックスに適用される点が異なります。
|
1 2 3 |
.element { height: stretch; } |
このstretchキーワードを使用すると、要素のマージンを維持しながら、可能な限り大きく表示されます。
下記のデモは、strecthキーワードとauto, 100vh, 100%の挙動を比較したものです。
See the Pen
CSS Wrapped 2025: stretch keyword by coliss (@coliss)
on CodePen.
CSSのstretchキーワードについて詳しくは下記をご覧ください。
CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
エルゴノミクス: 角丸以外にもさまざまな形にできるcorner-shape
CSSの新しいプロパティcorner-shapeは、要素の形状をよりより細かく制御できます。corner-shapeプロパティを使用すると、border-radiusによる標準的な角丸以外にも、角をさまざまな形状にカスタマイズできます。
border-radiusは、以下の角を実装できます。
roundbevelnotchscoopsquircle
実際の動作は、デモページでご覧ください。プルダウンから角の形状を選択できます。
See the Pen
CSS Wrapped 2025: corner-shape 1 by coliss (@coliss)
on CodePen.
corner-shapeプロパティはクリエイティブな可能性を無限に広げます。花のような形、六角形のグリッド、さらにはシンプルなスクエアとサークルの組み合わせ（スクエアクル）なども実装できます。このCSS機能は小さいながらも非常に強力です。
角の異なる形状間でアニメーションを適用すれば、動的で魅力的なインターフェイスも実現でき、ホバー効果や関心状態を表現するのに最適です。
See the Pen
CSS Wrapped 2025: corner-shape 2 by coliss (@coliss)
on CodePen.
CSSは、下記の通り。
|
1 2 3 4 5 |
.top-left-petal { grid-area: 1 / 1 / 3 / 3; corner-shape: round round scoop; border-radius: 50%; } |
さらに細かい制御が必要な場合は、superellipse()関数で任意の連続曲線を作成でき、微調整されたユニークなコーナーデザインを実現できます。
sponsors
