標準CSSで動く！@functionでカスタム関数を定義する方法



Web制作において、効率的にコードを書くことは非常に重要です。
特に複雑なスタイルを繰り返し適用する場合、共通処理をまとめることでコードがスッキリし、保守性も向上します。

そこで今回は、コードの効率化に役立つCSSのカスタム関数を定義する最新構文、@functionについてご紹介します。
この機能はSassなどのプリプロセッサではおなじみですが、2025年8月現在、一部の最新ブラウザで標準CSSとして動作するようになっています。
外部ツール不要で、CSS内に再利用可能なロジックを直接書けるのが魅力です。

@functionは、自分で定義した関数を作るための構文になります。
関数は、特定の入力（引数）を受け取り、それを加工して結果（値）を返す役割を担います。

例えば、「指定された値を2倍にする関数」や「単位を変換する関数」など、繰り返し使う処理を関数として定義することで、記述を短くできるだけでなく、変更時の修正箇所も最小限に抑えられて管理しやすくなります。

以下の例は、これまでのSassで実装で、与えられた値を2倍にする関数の定義になります。

Sass

@function double($value) {
  @return $value * 2;
}

.box {
  width: double(10px); // 2倍の20pxに変換されて出力される
}


この場合、Sassがコンパイルするとブラウザに渡るCSSは以下のようになります。

CSS

.box {
  width: 20px;
}


これまでは、このような便利な機能を使うためにSassやPostCSSなどのビルドツールが必要でした。

標準CSSでのカスタム関数（@function）の使い方


一部の最新ブラウザでは、@functionをCSSファイル内に直接書くことができます。

サンプルとして、以下のようなHTML構造を用意します。

HTML

<section>
  <div class='box'>BOX</div>
</section>



続いてCSS。
@functionで関数を定義します。
関数名・引数名ともに先頭に — を付けるのが仕様になります。

CSS

@function --double(--value) {
  result: calc(var(--value) * 2);
}

:root {
  --base-font-size: 1rem;
}

.box {
  color: #fff;
  text-align: center;
  font-size: --double(var(--base-font-size));
  width: --double(100px);
  height: 100px;
  background-color: #333;
  margin: 20px auto;
}


@functionで独自の関数の定義の宣言をし、関数の名前（–double）と関数の引数名（–value）を設定します。
resultは、関数が返す値の指定となります。ここではcalc()を使って、引数の2倍を計算して結果を返しています。
var(–value) で引数の値を取得し、calc()で2倍にしています。

構文の解説

@function
CSS内で独自の関数を定義する構文。
–double
関数の名前。CSSカスタムプロパティと同じく先頭に–を付ける。
(–value)
関数の引数名。–から始めるのが決まり（変数名みたいなもの）。
result:
関数が返す値を指定。
var(–value)
引数–valueの値を参照。


以下、Webブラウザでの表示になります。

標準CSSでのカスタム関数（@function）の使い方



このように、自作の関数内で渡した値を使って処理をし、結果を返してスタイルを適用させます。
ただ、doubleだと倍率が2倍に絞られるため汎用性は低いでしょう。

汎用性を高めた「multiply」関数


–double()は2倍固定なので、もう少し使いやすくするため、引数を2つ受け取って指定した倍率を掛ける汎用関数「multiply」を定義してみます。

CSS

@function --multiply(--value, --factor) {
  result: calc(var(--value) * var(--factor));
}

:root {
  --base-font-size: 1rem;
}

.box {
  color: #fff;
  text-align: center;
  font-size: --multiply(var(--base-font-size), 3);
  width: --multiply(100px, 3);
  height: 100px;
  background-color: #333;
  margin: 20px auto;
}

構文の解説

–value
元の数値（例: 10px）
–factor
倍率（例: 1.5, 2 など）



@function –multiply(–value, –factor) は、値に任意の倍率を掛ける汎用的な関数になります。
1つ目の引数 –value は元の値（例: 10px）、2つ目の引数 –factor は掛けたい倍率（例: 1.5 や 3）です。
関数内ではcalc()を使って掛け算を実行し、resultで結果を返します。
これにより、.boxクラスではfont-sizeを1remの3倍、widthを100pxの3倍のように実装できます。

標準CSSでのカスタム関数で作る、汎用性を高めた「multiply」関数



倍率を自由に設定できるため、–doubleよりも応用範囲は広くなります。

pxからremに単位を変換する関数


レスポンシブWebデザインでは、px単位よりもrem単位のほうが柔軟です。
そこで、指定したpx値をremに変換する関数を作ってみます。

CSS

@function --px-to-rem(--px, --base: 16) {
  result: calc((var(--px) / var(--base)) * 1rem);
}

.box {
  font-size: --px-to-rem(32);
}

構文の解説

–px
変換したいpx値（例: 32）
–base
基準フォントサイズ（デフォルト16px）
–px-to-rem(32)
(32 / 16) * 1rem → 2rem に変換されます。



@function –px-to-rem(–px, –base: 16) は、ピクセル値を rem 単位に変換する関数になります。
–px に変換したいピクセル値を渡し、–base にルートの基準フォントサイズ（デフォルト 16px）を渡します。
引数に対するデフォルト値はコロン（:）で渡すことができ、関数（–px-to-rem）に値を引き渡す際、デフォルト値を設定した第2引数（–base）は省略できます。
例では 32px を (32 / 16) * 1rem に計算し、2remを返します。

標準CSSでのカスタム関数で作る、pxからremに単位を変換する関数



このようにして、Webブラウザのフォントサイズ変更やレスポンシブ対応にも柔軟に対応できます。

最後に


プログラミングでお馴染みの概念である関数が、今後ブラウザ対応が進めば、コンパイル不要で、CSSだけで柔軟なロジックを組んでスタイルを適用させることができるようになります。

 



今のうちに使い方を知っておくと、実務での導入もスムーズになるでしょう。