CSS関数を自作！ Chrome Canaryで試せるカスタムCSS関数

Webデザインやフロントエンド開発において、CSSは重要な役割を果たします。しかし、既存のCSS関数だけでは動的で柔軟なデザインの実装に限界を感じますよね……。一昔前と比べれば天と地ほども便利になっているというのに、さらに複雑なことも出来るようになってくれだなんて欲深いですね。

さて、ここで登場するのが”カスタムCSS関数”です。これを使うことで、既存のCSSではできなかったことが実現でき、デザインの自由度が格段に向上します。

カスタムCSS関数って何ぞや？

自分自身でCSS関数を定義できるステキな機能です。「CSS Functions and Mixins Module」という仕様に基づいて実装されるもので、@function ルールを使用して開発者が関数を定義できるようになります。より柔軟で再利用可能なスタイルを書くことができ、Webデザインの自由度が大きく広がります。

ただし、現時点では Chrome Canary でプロトタイプが実装された段階で、chrome://flags にアクセスしてフラグを有効にすることで機能します。ブラウザに標準実装されたわけではありません、注意です。

基本的な使い方

使用例として、簡単な計算を行なう関数を作ってみましょう。

/* ユーザー定義関数で動的に幅を計算 */
@function calculate-width($value1, $value2) {
  @return $value1 + $value2;
}

/* 関数を使ってボックスの幅を設定 */
.box {
  width: calculate-width(50px, 30px); /* 結果は80px */
}

CSS内で自分で作った計算式を使うことができ、動的なスタイルの指定が可能になります。

想定されるユースケース

動的なレスポンシブデザイン

レスポンシブデザインでは画面のサイズに応じて要素の大きさや配置を変更しますが、従来のCSSでは限界があります。カスタム関数を使えば、例えば画面の幅に応じて要素の幅を計算し、さらにその値を他のスタイルにも反映させることができます。

/* ビューポートサイズに基づいて動的にスタイルを調整 */
@function dynamic-width($viewport-width) {
  @return $viewport-width * 0.2; /* ビューポートの20%を幅として指定 */
}

.container {
  width: dynamic-width(100vw);
}

共通のスタイルを関数化

例えば、同じ計算を何度も使う場合。複数の場所で使うスタイルを関数として定義することで、コードの重複を減らしてメンテナンスを容易にすることができます。カスタム変数で事足りればいいんですけど、そうもいかない場面ってありますよね。

/* 何度も使う色の調整を関数に */
@function adjust-color($color, $amount) {
  @return lighten($color, $amount); /* 色を明るくする関数 */
}

.button {
  background-color: adjust-color(#3498db, 20%);
}

条件に基づく動的なスタイル変更

例えば、「ユーザーがインタラクションした場合や特定のメディアクエリに一致する場合」といった、特定の条件下で異なるスタイルを適用したいケースでも、カスタム関数は強力です。

@function responsive-padding($width) {
  @if $width > 800px {
    @return 20px;
  } @else {
    @return 10px;
  }
}

.container {
  padding: responsive-padding(1000px); /* 20px */
}

※しれっと ” if() ” が忍び込んでますが、現時点ではコレも Chrome Canaryでフラグを有効にすると機能するやつです。

カスタムCSS関数の標準化が待ち遠しい！

現時点（2025年3月18日）では、この仕様はまだエディターズドラフトの段階であり、正式な仕様として確定しているわけではありません。カスタムCSS関数はChrome Canaryのような実験的な環境でのみ使用可能ですが、これからのWeb技術の進化に伴って正式に標準化される可能性があります。カスタムCSS関数が正式に標準化された暁には、CSSだけでかなり複雑なスタイルやレイアウトが可能になります。今後のWeb開発においてますます重要な技術になりそうですね。

「CSS Functions and Mixins Module」の最新情報や仕様の進捗については、W3C CSS Working Group による公式の仕様書や関連するドキュメントを確認してみてくださいね。