💧

CSSに関数が登場！Fluid Layoutを簡単に作成する関数を作った

2025/08/09に公開

2025年8月6日にリリースされたChrome 139から、CSSで関数が使えるようになりました。
New in Chrome 139では、次のような関数が紹介されています。
@function --negate(--value) {
    result: calc(var(--value) * -1);
}
CSSに関数機能が追加されたことで、CSSの記述がより柔軟になり、できることが格段に増えました。
そこで今回は、CSSの関数を使ってFluid Layoutを簡単に作成する関数を作ってみました。

 Fluid LayoutとはFluid Layoutとは、絶対単位（px、remなど）と相対単位（vw、vminなど）の長所を組み合わせた手法です。
clamp()関数を使って最小値と最大値を指定し、画面サイズに応じて中間値を自動計算することで、レスポンシブなデザインを実現します。
ただ、clamp()関数は最小値、最大値、そして中間値の3つの値を指定する必要があって、これを手動で計算するのが面倒です。
そこで、CSSの関数機能を使って、これらの値を自動計算する関数を作りました。

 従来の課題これまでは、Fluid Layout Makerのようなツールで数値を入力して、計算された値をCSSにコピペして使ってました。
例えば、最小値32px、最大値64px、最小画面サイズ320px、最大画面サイズ1440pxでFluid Layoutを作る場合、次のように書く必要がありました。
clamp(32px, calc(2.86vw + 22.86px), 64px);
数値のどれか一つを変えると全体を再計算し直さないといけないので、面倒でした。

 CSSの関数を使ったFluid Layoutの実装CSS関数が登場したおかげで、これらの値を自動計算する関数が作れるようになりました。
これで、最小値、最大値、最小画面サイズ、最大画面サイズの4つを指定するだけで、Fluid Layoutが簡単に実装できます。
実際の関数は次のようになります。
@function --fluid(--min-size, --max-size, --min-screen-size, --max-screen-size) {
    result: clamp(
        calc(var(--min-size) * 1px),
        calc(
            (var(--max-size) - var(--min-size))
            / (var(--max-screen-size) - var(--min-screen-size))
            * (100vw - var(--min-screen-size) * 1px)
            + var(--min-size) * 1px
        ),
        calc(var(--max-size) * 1px)
    );
}

 使用例この関数を使うと、こんなにシンプルに書けます。
h1 {
    font-size: --fluid(32, 64, 320, 1440);
}
これで、最小値32px、最大値64px、最小画面サイズ320px、最大画面サイズ1440pxのFluid Layoutが直感的に作れます。

 まとめCSS関数のおかげで、Fluid Layoutがとても簡単に作れるようになりました。
もう複雑な計算式やツールに頼る必要がなくなって、レスポンシブなデザインの作業効率がかなり上がります。
みなさんもぜひ試してみてください。

Fluid Layoutとは

従来の課題

CSSの関数を使ったFluid Layoutの実装

使用例

まとめ

Discussion