CSS @functionの衝撃：カスタム関数のプロンプト作例と実用解説
2026年5月、CSSに@functionルールが正式に導入された。これは変数（カスタムプロパティ）や計算関数（calc()）では難しかった「複数行のロジック」「条件分岐」「型変換」を、純粋なCSSだけで実現する手段を与える。すでに一部ブラウザで実装が進み、Baselineに近づきつつある。開発者にとっては、プリプロセッサ依存からの脱却と、ランタイムでの変換処理削減という2つのインパクトがある。
@functionの構文と実例
@functionは以下のように定義する。@returnキーワードで値を返し、引数にはデフォルト値も指定可能。内部ではcalc()やif()、他のカスタムプロパティを自由に使える。
@function --clamp-steps($min, $max, $steps) {
@return max($min, min($max, var(--step) * $steps));
}
.my-element {
--step: 1rem;
font-size: --clamp-steps(0.8rem, 2rem, 3);
}
上記は、ステップ数に応じて値をクランプする関数。Sassの@functionとほぼ同じ書き味だが、ブラウザが直接解釈する点が決定的に違う。プリプロセッサのようにビルド時に静的に展開されるのではなく、変数の変更に応じて動的に再計算される。
なぜ今@functionが必要だったのか
これまでもCSSはcalc()やmin()/max()/clamp()で簡易的な計算をカバーしてきた。しかし、デザインシステムの複雑化に伴い、次の要求が高まっていた。
- カスタムプロパティに対して複数の変換処理を連鎖させたい（例：pxをremに変換→比率をかける→clamp）
- 同じ計算ロジックを複数の場所で再利用したい（DRY原則のCSS版）
- コンポーネント設計で、JavaScriptからCSS変数を操作するだけでレイアウトが動的に変わる仕組みが欲しい
@functionはこれらの要求に応える。さらに、@propertyによる型指定と組み合わせれば、型安全な計算もCSSだけで完結する。SassやPostCSSプラグインで行っていた処理をブラウザがネイティブで実行できるようになる。
開発者が直面する現実問題
ただし、すべてがバラ色ではない。2026年5月時点で@functionを実装しているのはChrome 128+、Edge 128+、Firefox Nightlyのみ。Safariは未実装。プロダクションで使うには少なくとも6〜12か月の猶予が必要だ。
また、プリプロセッサを使ってきたプロジェクトでは「CSSにロジックを書く」という文化自体がまだ浸透していない。筆者自身、@functionを導入したら「なぜSassでやらないのか」とレビューで指摘された例を聞いている。チームのコード規約と、ランタイムコストのトレードオフを説明できることが、これからのCSSエンジニアには求められる。
@functionが変える未来
この機能が安定すると、CSSは「スタイルシート言語」から「スタイル計算エンジン」へと進化する。JavaScriptに依存していたアニメーションの速度制御や、レスポンシブな値の変換が、すべてCSSレイヤーで完結する。結果として、レイアウトシフトのリスク低減、パフォーマンス向上、そしてコードの可読性向上が期待できる。
次に来るのは、おそらく@functionとCSS State Queries（コンポーネントの状態に応じて値を変える仕組み）の連携だ。あるいは、View Transitions APIの中で関数を使って動的に遷移パラメータを生成するパターンも出てくるだろう。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！