CSS｜フォントサイズ可変を実現する関数「min()・max()・clamp()」の使い方

CSSのプロパティには、min()・max()・clamp()という関数があり、これを使用することで表示幅に応じてフォントサイズを可変にすることができる。

もちろん、width: min(500px, 100%); のようにして横幅を指定したりもできる。便利、そしてラク。

なn？

最小値・最大値・推奨値を算出するCSS関数

min()は最大値を指定し、max()は最小値を指定する関数。 clamp()は最小値・推奨値・最大値を指定する関数。

コード

それぞれの使い方は以下です。

min()

* {
    font-size: min( 基本値, 最大値 );
}

max()

* {
    font-size: max( 基本値, 最小値 );
}

clamp()

* {
    font-size: clamp( 最小値, 推奨値, 最大値 );
}

サンプル

CSS ( SCSS )

.sample {

    text-align: center;

    .min {
        font-size: min(2.5vw, 10rem);
    }
    .max {
        font-size: max(2.5vw, 10rem);
    }
    .clamp {
        font-size: clamp(5rem, 2.5vw, 10rem);
    }
}

HTML

<div class="sample">
    <div class="min">font-size: min(2.5vw, 10rem);</div>
    <div class="max">font-size: max(2.5vw, 1rem);</div>
    <div class="clamp">font-size: clamp(1rem, 2.5vw, 10rem);</div>
</div>

出力結果

参考

min() – CSS: カスケーディングスタイルシート | MDN

max() – CSS: カスケーディングスタイルシート | MDN

clamp() – CSS: カスケーディングスタイルシート | MDN