GifproGifpro
Prompt LibraryAllProgrammingImage GenerationStable DiffusionVideo GenerationMusic GenerationDesign
Toolsサイト診断WebP ConverterImage ResizeFavicon Generator
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

CSS @functionとは？カスタム関数の作例と使い方【2026年最新】

CSS @functionとは？カスタム関数の作例と使い方【2026年最新】

CSSに待望のカスタム関数が登場

2026年4月〜5月のWeb Platformアップデートで、CSSに @function ルールが実験的に追加された。これにより、開発者はスタイルシート内で独自の関数を定義し、複雑な計算や色変換を再利用可能な形で記述できる。従来はSassやLESSなどのプリプロセッサに依存していた領域が、ネイティブCSSで実現可能になる。

@functionで何ができるのか

@function は、引数を受け取り計算結果を返すCSSの新しいルール。以下のように記述する：

@function --ratio($base, $target) {
  result: calc($target / $base);
}

.small {
  font-size: calc(1rem * --ratio(16, 14));
}

注目すべきは result キーワードで関数の戻り値を明示する点。従来のミックスインとは異なり、値の生成に特化している。同時に alpha() 関数も標準化され、色のアルファチャンネルを直接操作できるようになった。

なぜ今、ネイティブCSS関数なのか

CSSカスタムプロパティ（変数）が広く普及し、calc() や clamp() などの関数も日常的に使われている。しかし複雑な計算ロジックを複数箇所に展開すると、保守性が低下する。また、プリプロセッサの関数はビルド時に解決されるため、動的な値（例：ユーザーのフォントサイズ設定）には対応できない。@function はこれらの課題を解決し、ランタイムで解決されるカスタムロジックを提供する。

加えて、CSSのカスタム関数は @property や @layer といった他のアットルールと組み合わせることで、より宣言的なスタイル設計が可能になる。たとえば、カスタムプロパティの型を定義し、その型に基づいて関数の動作を切り替えるといった高度な使い方も模索されている。

実務での導入に向けた注意点

まず、2026年5月時点で @function はChrome Canaryでのみ利用可能（フラグ付き）。実プロダクション投入はまだ早い。移行コストとして、既存のSass関数をそのまま置き換えるのは得策ではない。Sassの @function とCSSの @function は構文が似ているが、スコープや使える演算子に違いがある。

具体的な注意点：

  • CSSの @function 内では var() 参照は可能だが、@apply のようなルールセットの適用は不可
  • 引数のデフォルト値設定や可変長引数は未サポート（今後の仕様策定次第）
  • パフォーマンス面では、頻繁な再計算が発生するプロパティ（アニメーション内）での使用は避けるべき
  • プリプロセッサの関数とCSS関数が衝突する場合、同名関数の上書きルールが未定義（将来の仕様で整理される見込み）

また、alpha() 関数はすでにSafari 17+でサポートされており、rgba() の代替として使える。既存のカラーテーマ設計をアルファチャンネルベースにリファクタリングする場合、ブラウザ間の互換性を確認しながら段階的に導入するのが安全。

View Transitionsと3Dの落とし穴

同じアップデート期間で、View Transitions APIに3D変換を適用する際のハマりポイントが報告されている。CSS-Tricksの記事によると、document.startViewTransition 内で3D変換をかける要素には transform-style: preserve-3d と適切な perspective の設定が必須。特にページ遷移時の要素が重なる場合、デフォルトの平面状態では3D効果が無視される。

対策として、トランジションの finished プロミス後に3Dプロパティを再適用するか、::view-transition-group 擬似要素に対して直接スタイルを設定する。ただし、view-transition-name に動的な値を指定する場合、同じ名前が複数要素に重複しないよう注意。

今後の展望

@function はCSSの表現力を大幅に高める一方、仕様はまだドラフト段階。2027年以降のBaseline入りが見込まれる。当面はプリプロセッサと併用しながら、カスタム関数を段階的にネイティブCSSへ移行する戦略が現実的。また、カスタム関数内で他のカスタム関数を呼び出すネストや、条件分岐の導入も議論されており、将来的にはミニ言語として成長する可能性がある。

とりわけ、デザインシステムを運用するチームにとっては、CSS変数・@property・@function の三つ組みで、完全に宣言的なテーマ管理が実現できる。Sassの @function と混同しないよう、命名規則（例：-- プレフィックス）を統一し、開発者間で合意を形成しておくのが得策。

参照

理人と理子

この記事を書いた人

理人と理子

ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！

Homeヘルプ