数学関数

calc()

calc()はCSSで算術演算（計算）を行うための関数です。
この関数を使用することで、異なる単位や値を組み合わせて新しい値（例：100％から10px引いた値など）を生成することができます。

calc()関数の構文

プロパティ: calc(式);

• calc()の中には、数値、演算子、および単位を含む算術式を記述します。
• 演算子は +（加算）、-（減算）、*（乗算）、/（除算）がサポートされています。
• 単位は、ピクセル(px)、パーセント(%)、ビューポート幅(vw)などのCSSで一般的な単位を使用できます。

幅・高さ・フォントサイズの指定

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例で
　.box1の幅を33.33%から10px（margin分）引いた値に設定
　.box2の高さを50vhに30px足した値に設定
　.box3のフォントサイズを16pxに2vw足した値に設定
しています。

calc()を使うことで、動的なサイズや位置の指定が簡単になり、レスポンシブデザインを構築する際に便利な関数です。

var()

var()はCSSの変数を使用するための関数です。
変数に値を設定することで、その値を複数箇所から呼び出すことができます。
また変更が必要な場合に変数の値を変更することで、複数箇所のスタイルを簡単に一括変更できるようになります。
変数は通常、ルート要素（:root）や任意の要素内で宣言され、それをvar()関数で呼び出して使用します。

var()関数の構文

var(--変数名 [, 初期値]);

カスタムプロパティの定義と使用

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、:rootセレクタで--main-colorというカスタムプロパティを定義し、それを.element内で使用しています。（文字色とボーダーカラー）
色の変更が必要な場合には、変数の値を変更することで関連するすべてのプロパティの色を変更することができます。

フォントサイズの変数とフォールバック値

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、:rootセレクタで--base-font-sizeというカスタムプロパティを定義し、.text内でそれを使用しています。
フォールバック値も指定されており、カスタムプロパティが未定義の場合には1remが適用されます。

動的な変数の使用

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、:rootセレクタで初期の--text-colorを設定し、.buttonのデフォルトのテキスト色として使用します。しかし、:hover状態になると、ホバー時のテキスト色が別の色に動的に変更されます。

var()関数を使用することで、柔軟でメンテナンス性の高いスタイルを作成できます。
同じ値を繰り返し使用する場合や、動的な変更に対応する場合に特に便利な記述です。

min()

min()は複数の値を比較して最小の値を選択します。
これにより、要素のサイズや他のプロパティが、指定した最小値よりも小さくならないように制御できます。

min()関数の構文

min(value1, value2, ...);

value1, value2, …: 比較する値を指定します。
これらの値の中から最小のものが選択されます。

単位の異なる数値の比較

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、.elementの幅は600pxまたはコンテンツ幅の50%のどちらか小さい方が選ばれます。
コンテンツ幅が50%が600pxより大きくなる場合には600pxが適用されます。
これにより、要素の幅が一定の最小サイズを保ちつつ、コンテンツに合わせて伸縮するようになります。（width:50%; max-width: 600px をまとめて記述するイメージです）

フォントサイズの制約

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、段落のフォントサイズは最大でも16pxまたは1.2emのいずれかに設定され、最小のものが選択されます。
1.2emが16pxよりも小さい場合には1.2emが選ばれます。
html要素のフォントサイズをどんなに大きくしても、p要素のフォントサイズは16pxを超えることはありません。

max()


max()は複数の値を比較して最大の値を選択します。
これにより、要素のサイズや他のプロパティが、指定した最大値よりも大きくならないように制御できます。

max()関数の構文

max(value1, value2, ...);

value1, value2, …: 比較する値を指定します。
これらの値の中から最大のものが選択されます。

max()関数の例

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

.elementの幅は300pxまたはコンテンツ幅の50%のどちらか大きい方が選ばれます。
コンテンツ幅の50%が300pxよりも小さくなる場合には300pxが適用されます。
これにより、要素の幅が一定の最大サイズを保ちつつ、コンテンツに合わせて縮小するようになります。（width:50%; min-width: 300px をまとめて記述するイメージです）

フォントサイズの制約

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、段落のフォントサイズは最低でも20pxまたは1.2emのいずれかに設定され、最大のものが適用されます。
1.2emが20pxよりも大きい場合には1.2emが選ばれます。
html要素のフォントサイズをどんなに小さくしても、p要素のフォントサイズは20px未満になることはありません。

clamp()

clamp()は最小値（min）、希望する値、最大値（max）を設定し、指定された範囲内の値を取ることができます。
これにより、異なる画面サイズやデバイスに対応する際に、柔軟で動的な値の指定が可能となります。

clamp()関数の構文:

clamp(min, preferred, max)

• min: 値の最小範囲を指定します。
• preferred: 希望する値を指定します。この値が最終的に適用される場合、指定された範囲外になることはありません。
• max: 値の最大範囲を指定します。

動的なフォントサイズの指定

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、段落のフォントサイズは最小で16px、最大で24pxとなりますが、画面の幅に応じて動的に変化します。
4vwはビューポートの幅に対する相対的な値で、画面が狭い場合は最小値に、広い場合は最大値に近づきます。

動的なコンテナの幅指定

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、コンテナの幅は50%となりますが、コンテナの最小値（300px）や最大値（600px）の範囲内に収められるように調整されます。

clamp()関数では、ビューポートの幅によってサイズを可変しつつ最小値や最大値の設定が行えるため、特にレスポンシブなデザインや柔軟なレイアウトを実現するために非常に便利です。