レンちゃんとペンタ

【サンプルあり】文字サイズのレスポンシブ対応も！CSSのmin() / max() / clamp() / calc()関数

【サンプルあり】文字サイズのレスポンシブ対応も！CSSのmin() / max() / clamp() / calc()関数

CSS内で使える4つの関数、min()、max()、clamp()、calc()関数をまとめてご紹介。
上手に使いこなすと、こんなメリットがあります。

・CSSの表記がカンタンになる
・文字サイズをレスポンシブにできる
・単位の違う数値で計算が可能(「% + px」とか)
・計算式のまま表記できる(「100% / 7」みたいな記述が可能)

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    min()関数

    min()関数では、括弧内にカンマ区切りで入れた値のうち、一番小さいものが採用されます。
    以下はサンプルです。div要素の幅は、50vwと500pxのうち小さい方のサイズになります。

    /* min()関数のサンプル */
div{
  width: min(50vw, 500px);
}
    ＜サンプル＞
    このdivの幅は、50vwと500pxのうち小さい方のサイズになります
    (基本的に50vwだけど、500pxは超えない)

    max()関数

    max()関数では、括弧内にカンマ区切りで入れた値のうち、一番大きいものが採用されます。
    以下はサンプルです。div要素の幅は、50vwと300pxのうち大きい方のサイズになります。

    /* max()関数のサンプル */
div{
  width: max(50vw, 300px);
}
    ＜サンプル＞
    このdivの幅は、50vwと300pxのうち大きい方のサイズになります
    （基本的に50vwだけど、300px未満にはならない）

    clamp()関数

    clamp()関数では、括弧内にカンマ区切りで、最小値、基本値、最大値を設定します。
    採用される値は、最小値と最大値を超えない範囲での基本値です。
    以下はサンプルです。基本のサイズは50vwですが、最小値は300px、最大値は500pxになります。

    /* clamp()関数のサンプル */
/* 基本値は50vw、最小値は300px、最大値は500px */
div{
  width: clamp(300px, 50vw, 500px);
}
    ＜サンプル＞
    このdivの幅は、300px〜500pxを超えない範囲内で50vwになります

    calc()関数

    calc()関数は、括弧の中で加減乗除を行う事ができます。
    以下、全く脈絡がありませんが、calc()を利用したイメージです。
    単位の違う値を組み合わせた計算ができるという特徴があります。

    /* 足し算の例 */
div{
  width: calc(50% + 10px);
}

/* 引き算の例 */
div{
  width: calc(10vw - 20px);
}

/* 掛け算の例 */
div{
  width: calc(20vh * 2.5);
}

/* 割り算の例 */
div{
  width: calc(100% / 7);
}

    関数を使うメリット

    それぞれの関数を使って、サイズの指定方法が豊かになったのは分かりましたが、具体的にどんな時に役立つんでしょう？
    私は考える利点は以下の通りです。

    ・CSSの表記がコンパクトになる
    ・文字サイズをレスポンシブにできる
    ・柔軟なサイズ計算が可能
    ・計算式を残しておける

    CSSの表記がコンパクトになる

    例えば、以下の2つの表記は同じ設定ですが、min()関数を使った方は1行で表記することができます。

    div{
  width: min(50vw, 500px);
}

div{
  width: 50vw;
  max-width: 500px;
}

    文字サイズをレスポンシブにできる

    各関数をfont-sizeプロパティで利用すれば、フォントサイズをカンタンにレスポンシブ対応にすることができます。
    例えば以下のように表記すると、h1要素の基本文字サイズは5vwですが、50pxを超えることはありません。
    大きくなりすぎないので、ヒーローイメージのキャッチコピーの制御などに便利です。

    h1{
  font-size: min(5vw, 50px);
}

    柔軟なサイズ計算が可能

    calc()関数では、単位の違う値を組み合わせる事ができるとご紹介しました。
    例えば画面の左側にメイン記事、右側にサイドバーを配置するようなWebページを作りたいとして、それぞれの幅をこのように設計したいとします。

    ・サイドバーの幅：300px
    ・メイン記事の幅：ブラウザの幅 – 300px（←具体的な数値が導き出せない）

    calc()関数を使うと、こんなメイン記事のサイズもあっさり設定できちゃいます。

    /* メイン記事エリア */
#main{
  width: calc(100% - 300px);
}

/* サイドバーエリア */
#side{
  width: 300px;
}

    計算式を残しておける

    calc()関数でご紹介したこちらのサンプルですが、

    div{
  width: calc(100% / 7);
}

    答えとなる値をそのまま入れればいいじゃない、と思った方もいるかもしれません。
    私はよく、後からコードを見返した時に値の根拠を忘れてしまっていることが多いんですね。
    例えば100% / 7 ≒ 14.28%ですが、

    div{
  width: 14.28%;
}

    と書くと、14.28%がどこから求めた値か未来の自分がわからなくなりそうなので、

    div{
  width: calc(100% / 7);
}

    として、備忘録の意味でcalc()関数を使ったりします。

    まとめ

    • min(値1、値2)：小さい方の値を採用
    • max(値1、値2)：大きい方の値を採用
    • clamp(最小値、基本値、最大値)：最小値〜最大値の範囲で、基本値を採用
    • calc(計算式)：計算式のまま値の設定ができる。単位の異なる数値同士の計算も可能

    ちょっとこだわった数値設定をカンタンに叶えてくれるCSSの関数達。
    このサイトでもたくさんお世話になっていますが、ホントに便利ですよ〜。

    1. Home
    2. 【サンプルあり】文字サイズのレスポンシブ対応も！CSSのmin() / max() / clamp() / calc()関数

    Related Posts