CSSのcalc（）とは（およびそれを使用する方法）

一部のCSS関数は強力ですが、困難なためではなく、より簡単な代替手段が利用可能であるために使用されることはめったにありません。 calc（）もその1つです。それは非常に便利ですが、しばしばClamp（）によって隠されます。

calc（）clamp（）が触れられないレイアウトの問題を解決します。微調整セクションの高さ、粘着性ヘッダーの調整、1つのコードの柔軟なユニットと固定ユニットの混合に最適です。良いニュースは次のとおりです。単一のコードを記述せずにcalc（）を使用できます。

Divi 5では、インターフェイスに組み込まれているため、値を入力して、Diviが残りを処理します。どのように見たいですか？この投稿では、Calc（）の仕組み、それがどこに役立つか、Divi 5内でそれを使用する方法を学びます。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトを移行する前に少し待ちます。

CSSのcalc（）とは何ですか？

calc（）は、スタイルルール内で直接追加、減算、乗算、除算などの簡単な数学を実行できるネイティブCSS関数です。特に固定値と柔軟な値を混合して、すべてをハードコードせずにスムーズなレイアウトを取得する場合、サイズと間隔を微調整するのに最適です。

これを例で理解しましょう。要素を画面の80％を占有させ、それでもパディングの余地を残しているとします。あなたは書くことができます：

width: calc(80% - 40px);

これにより、コンテナの80％から40ピクセルを差し引くことにより、ブラウザが動的に幅を計算するように指示されます。自動マージンなどのセンタリング技術と組み合わせると、減算からの残りのスペースが均等に分布します。値は、画面サイズに基づいて自動的に調整されます。

一見すると、画期的には見えないかもしれません。ただし、Calc（）は、小さな画面での間隔の壊れたもの、固定ヘッダーの重なり、中心外セクションなど、日常のレイアウトの問題を解決するのに最適です。長いメディアクエリの代わりに、1行のcalc（）で十分です。一般的な1行のユースケースは次のとおりです。

• パディング：Calc（5VW + 20px）;液体のパディングを保ちます。小さな画面でも、20ピクセルを下回ることはありません。
• 高さ：calc（100VH - 80px）;固定ヘッダーがある場合は、コンテンツを表示します。画面の高さに基づいて自動的に調整されます。
• 幅：calc（60％ - 1rem）;一貫した間隔を維持しながら、セクションの幅を柔軟に制御できます。マージン左：calc（40％ + 0.5rem）などの値を使用して、周囲のマージンを調整できます。容器内の要素を視覚的に中央または整列させます。

要するに、Calc（）は、すべてのブレークポイントに対して追加のCSSを記述する必要性を削除します。スタイルを繰り返し書き直す代わりに、ロジックを値に直接構築し、レイアウトを自動的に応答させることができます。サイズを定義するだけでなく、要素がどのように動作するかを決定します。

Calc（）の仕組みを理解する

calc（）の基本的な構文は次のようになります。

 calc(value operator value) 

ここでは、値の有効な長さまたは単位を使用でき、演算子は +、 - 、 *、または /になります。

たとえば、要素の幅を40ピクセル削減する場合は、幅を書き込みます。 ％の使用に注意してください。それが幅を柔軟にするものです。

Calc（100px〜40px）を使用した場合、結果は常に60ピクセル、つまり静的になります。ただし、パーセンテージを使用することにより、画面または親要素に基づいてブラウザにサイズを計算させます。レイアウトが変更されると自動的に調整されます。

クイックヒント（および共通のルール）：常に値と演算子の間にスペースを追加して、Calc（）を適切に機能させる。スペースがなければ、CSSは機能しません。以下では、スペースのないcalc（）関数が有効でないため、コンテナ幅がデフォルトに復元されることがわかります。

複数のユニットを使用します

さまざまな相対ユニットの組み合わせを開始すると、Calc（）の真の利点がどのように来るかを見ました。たとえば、ピクセルのある割合またはREMを使用した視野幅。これは、画面サイズの変更に基づいてレイアウトが応答し始めるからです。

それを明確にするために、実際のレイアウトでどのように機能するかを確認するためのいくつかの便利なコンボがあります。

また、複数の値とユニットを1行に組み合わせることもできます。これにより、サイジングレスポンシブレイアウトがより正確になります。以下のこの例では、％、PX、およびREMを使用してレイアウトスケーリング、固定間隔、タイポグラフィを混合します。

 width: calc(50% - 40px + 1rem); 

• 容器で50％のスケール
• 40pxは、サイドバーのような固定スペースを差し引きます
• 1REMは、フォントサイズに基づいて間隔を追加します

Nesting calc（）関数

また、1つのcalc（）を別のcalc（）をネストして、より複雑なレイアウトロジックを構築することもできます。これは、値の間の明確な関係を持つデザイン（レイヤーごと）についての考え方を反映する素晴らしい方法です。たとえば、幅：calc（200px - calc（100px + 2rem））;

ここでは、ブラウザは最初に100px + 2REMを計算します。これは、パディング、マージン、または別の要素のサイズを表すことができます。次に、その合計を200pxから減算して最終幅を取得します。幅はREMのために相対的なままです。

この種のネストは、レイアウトが複数の要因に依存する場合に役立ちます。自分で数学を行うか、固定値をハードコードする代わりに、CSSで関係を直接書くことができます。デザインを柔軟に保ち、後で更新しやすくなります。

ネストされたcalc（）は頻繁に必要ではありませんが、層状の間隔や重複要素を扱うときに役立ちます。とはいえ、彼らは圧倒的になる可能性があるので、最初に簡単な計算から始めたいと思うかもしれません。複雑さを追加すると、それがどのように機能するかに慣れると、自然に感じられます。

clamp（）を持っているのになぜcalc（）を使用するのですか？

Clamp（）をより頻繁に使用する場合、この質問があるかもしれません。明確な答えを得るには、2つの違いを理解することをお勧めします。

Clamp（）はモダンなので、メディアクエリに頼らずに流体の設計を構築するためにそれを使用することに興奮するのは簡単です。しかし、Clamp（）はより賢く感じていますが、次のようにCalc（）がより関連性のある状況が多くあります。

• 柔軟なレイアウトから固定値を減算する：高さを使用する：calc（100VH - 80px）を使用すると、セクションが固定ヘッダーの高さを引いた画面を引いた状態で確認するため、要素は重複しないようにします。 clamp（）は、減算をサポートしないため、これを行うことができません。
• 精度のあるオフセット要素：マージン左のような値：calc（50％ - 200px）;容器を視覚的にバランスさせながら、容器に対して要素をシフトします。 Clamp（）は、この種のリレーショナルポジショニングを実行できません。
• サイドバイサイドセクションの調整：幅のある1つの列：calc（60％ - 2REM）で応答性のある2列のレイアウトを作成するのに役立ちます。スペースの60％が一貫したギャップを差し引いています。 Clamp（）は、単一の値をスケーリングするのに最適ですが、複数の値間の関係が必要な場合にcalc（）が優れています。

全体として、Clamp（）は、単一の値が画面サイズにわたってどのようにスケーリングするかを定義する場合に優れています。ただし、上記の場合のように、レイアウトが一度に複数のことに依存する場合、calc（）は必要なものです。

calc（） + clamp（）を組み合わせる

calc（）とclamp（）はそれ自体が強力ですが、両方を組み合わせることができるのになぜそれを使用するのですか？ calc（）内部Clamp（）をネストして、柔軟なスケーリングと正確な制御を組み合わせるなど、組み込みのロジックを備えた流体設計を構築できます。

たとえば、パディング：クランプ（1rem、calc（2vw + 10px）、3rem）; 1REMと3REMの間でスケーリングする間隔を作成しますが、「優先」値は、ビューポート幅と固定値を混合するCALC（）式に基づいています。

これにより、デザインに対する応答性が高く、論理的で、正確な制御が可能になります。 Calc（）とClamp（）を個別に使用し、いつ組み合わせるかを学習したら、カスタムブレークポイントに頼らずにレイアウトを完全に制御できます

calc（）でcss変数を使用する

COLC（）の柔軟性をCSS変数で拡張することもできます。変数を他のユニットと組み合わせ、それらに数学を実行し、再利用可能な値を中心にレイアウトロジックを構築します。たとえば、root {–gap：40px;}を定義する場合、パディングを使用してください：calc（var（–gap） + 1rem）;ルート値に基づいてレスポンシブパディングを設定するのに役立ちます。

注：calc（）内でCSS変数を使用している間、変数をvar（）にwrapします。私が上記の方法を見てください。

これにより、CALC（）で正確に制御しながら、一貫した設計システム（CSS変数）を使用して完全なWebサイトを構築できます。また、レイアウト全体で間隔を調整するなど、（グローバル）変更を行いたい場合は、ルート値を変更して実行できます。

Clamp（）ではこれは簡単ではありません。 Clamp（）はCSS変数をサポートしていますが、各値は完全な有効なユニットに解決する必要があります。これはどういう意味ですか？

クランプ（1REM、var（ - fluid-size）、3REM）のような関数は、4VWのようなものに解決する場合にのみ機能します。また、変数を追加したり減算したりするなど、変数を使用して数学を行う必要がある場合は、その部分をcalc（）にラップする必要があります。これらの小さなものは、変数を使用して動的値を構築するときにCalc（）を不可欠にします。

divi 5のcalc（）

CALC（）とCLAMP（）の両方は、レイアウト、間隔、応答性を強力に制御できる高度なCSS関数です。これにより、開発者やWebプロフェッショナルへの使用が制限されます。しかし、視覚的なワークフローを好む人はどうですか、そしてそれでも設計でcalc（）とclamp（）を使用したいのでしょうか？これができますか？

はい、できます。 Divi 5内では、Calc（）とClamp（）の両方が高度なユニットとして利用可能であり、それらと連携するために単一のコードを書く必要はありません。

YouTubeチャンネルを購読してください

あなたがすることは、calc（）を任意の数値入力フィールド内に直接入力することです。それだけです。

Diviビルダーは即座に動作します。 Calc（）値を入力すると、設計中にライブフィードバックが表示されます。ビルダー、devtools、またはプレビューを切り替える必要はなく、それがどのように見えるかを推測する必要はありません。

DIVI 5は、コードに触れることなく、よりスマートで柔軟なデザインを簡単にします。 Calc（）とDiviの設計変数または独自のCSS変数を組み合わせて、再利用可能な動的レイアウトを作成することもできます。次のセクションでそれを行う方法を紹介します。

ちなみに、Divi 5が高度なユニットのすべてのCSS関数もサポートしていることをご存知ですか？あなたもそれらについて学びたいかもしれません

Divi 5の高度なユニットに関するすべてを学びます

Divi 5がCalc（）を使用して簡単にする方法

Divi 5がデザインでCalc（）を使用して簡単に作業しながら、作業中にインスタントプレビューを提供するのを見ました。しかし、もっとあります。 Diviは、回避策だけでなく、コードのラインを書くことなく、開発者が依存している同じツールを使用して、応答性のあるロジックベースのレイアウトを構築するための完全に統合されたノーコードの方法を提供します。

シャドウで静かに作業しながら、calc（）をヒロイックに使用するのに役立つ方法は次のとおりです。

1。calc（）を任意の数値フィールドに適用します

あなたがコーディングしていないからといって、あなたが限られているというわけではありません。 Divi 5では、Calc（）はどこでも動作します。数値が受け入れられます（幅、高さ、パディング、マージン、ギャップ、フォントサイズ、どこでも）。フィールドが数値を受け入れる場合、calc（）をサポートします。

Calc（）を適用することは比較的簡単です。必要なのは、他の高度なユニットからcalc（）を選択し、式を入力することです。

これは、ビルダーを離れることなく視覚的にレイアウト数学を処理できることを意味します。固定されたヘッダーの高さを差し引く、フォントサイズに柔軟な間隔を追加するか、より良い応答性を得るためにユニットを混合するかどうかにかかわらず、Diviを設計フィールド内で直接行うことができます。

フォーミュラを入力するだけで、結果は即座に更新されます。コードパネル、タブの切り替え、2番目の推測もありません。それは完全な制御であり、ワークフローに組み込まれています。

2.インスタントライブプレビューを取得します

Divi 5でCalc（）を使用することに関する最良の部分の1つは、リアルタイムで何をしているかを見ることができることです。間隔やアライメントがどのように見えるかを推測する必要はありません。 calc（）式を入力すると、ビルダーは即座に更新されます。

ご覧のとおり、Calc（）値を入力すると、パディングがすぐに変わりました。また、異なるブレークポイントを切り替えて、画面のサイズに基づいてパディングがどのように調整されるかを示しました。

変更を加えても、入力すると結果が表示されます。この即時のフィードバックは、計算がレイアウトにどのように影響するかを理解し、タブを切り替えることなく値をすばやく調整できるようになります。

3. calc（）で高度なワークフローを構築する

Divi 5でcalc（）を使用すると、値を追加または減算できるため、強力ではありません。本当の強みは、よりスマートなワークフローのロックを解除することです。 DIVIでは、Calc（）とClamp（）、CSS変数、​​設計変数、オプショングループプリセットなどの高度なツールをすべてVisual Builder内に組み合わせることができます。

簡単な1回限りの調整に限定されません。 DIVIを使用すると、画面サイズに流動的に応答するレイアウトシステムを作成し、一貫した間隔ルールに従い、設計トークンが変更されたときに自動的に更新できます。どのように見てみましょう：

1。CSS変数を使用してcalc（）を拡張します

DIVI 5は、設計フィールド内でCSS変数を直接サポートしています。つまり、再利用可能な値を定義し、視覚的に計算できます。すべてのページセクションで固定パディングを使用したいとしましょう。そのため、CSS変数として保存します。

:root {
--section-padding: calc(4rem + 2vw);
}

これを行うには、ページ設定> [Advanced]> [Custom CSS]にアクセスして、ここにルート値を追加します。

ここで、どこにでも完全な式を入力する代わりに、Divi内の任意のパディングフィールドでVAR（ - セクションパッジング）を使用することができます。結果はライブで更新され、後でルート値を変更すると、レイアウト全体がその変化を即座に反映します。

更新されたAdvancedユニットに注意してください。これは、calc（）式内のvar（）関数を使用してCSS変数が挿入されたことを意味します。

DIVIでCSS変数を使用することは驚くほど簡単です。スタイルシートに触れることなく、ページ自体にそれらを定義するだけです。これにより、一貫した設計フレームワークを維持し、新しい値をテストし、レスポンシブレイアウトルールを構築できます。

2。設計フレームワークでcalc（）を使用します

DIVI 5では、Calc（）値を設計変数として保存することで、Webサイト全体で1つのレイアウトロジックを簡単に再利用できます。サービスセクションに常に画面を埋めて、固定ヘッダーの高さを差し引いてもらいたいとします。次に、数値変数を作成し、値計算（120VH〜30px）でセクションの高さに名前を付けることができます。

ここでは、30pxが固定ヘッダーの高さです。

次に、保存された変数を適用するには、セクションの設計設定に移動し、高さにホバリングして動的フィールドアイコンを見つけます。それをクリックすると、保存された変数がポップアップします。セクションの高さをクリックして適用します。

このアプローチは、デザインを一貫性に保ちながら、完全なレイアウト制御を提供します。プリセットや静的値にロックされていません。代わりに、ページ、テンプレート、画面サイズに隣接するロジックを構築しています。

設計変数は、大きな可能性を解き放ちます。たとえば、デザインフレームワークを視覚的に構築し、すべてのWebサイトページで使用して、デザインルールを全体的に一貫性に保つことができます。また、ページを設計する前に、タイポグラフィと間隔およびサイジングシステムを構築することをお勧めします。

3.オプショングループプリセットを作成して保存します

レイアウトがCalc（）値を一貫して使用すると、Divi 5は再利用のためのロジックを簡単に保存します。スタイリングセットアップ（またはパディング、ギャップ、マージン、幅などの個々の設定）をオプショングループプリセットとして保存できます。これは、calc（）式を繰り返し適用する代わりに、プリセットを選択するだけで、レイアウト数学が即座に適用されることを意味します。

たとえば、複数のセクションでパディング：calc（4rem + 2VW）を使用した場合、どこにでも再タイプする必要はありません。プリセットとして保存するだけです：

次に、必要な場所に保存されたプリセットを適用します。すべてが視覚的に更新されるため、効果がすぐにライブで表示されることがあります。

さらに良いことに、これらのプリセットで設計変数を使用した場合、後でグローバルに値を更新できます。変数を1回変更し、それを使用するすべてのプリセットは更新を反映します。これにより、大規模な編集が高速かつ一貫性があります。

デザイン変数の保存された値を変更することで、パディングセクションで更新されながらライブプレビューも提供する方法に注意してください。これは、間隔セク​​ションプリセット内のセクションの高さ変数を使用したためです。

それがDivi 5がもたらす力です。高度なレイアウトロジックをサイト全体で一貫性を保ちながら、設計システムをスケーリングするのに役立ちます。 calc（）などの高度なユニットの組み合わせに慣れたら（ここでは、Calc（）ユースケースを参照して、Diviのモジュラー設計システムを使用して、それらを効果的に習得するためのヒントを参照） 、Webサイトを構築するための効率的で楽しい方法のロックを解除します。

Diviは数学を簡単に感じさせます

calc（）やclamp（）などのCSS関数を使用するために開発者である必要はありません。 Divi 5は、これらの高度なツールを、探索、テスト、適用が簡単な視覚インターフェイスに持ち込みます。コードのラインを作成せずに、単純なレイアウトの調整から複雑な設計システムまで、すべてを実行できます。

間隔を調整したり、変数を使用したり、再利用可能なプリセットを構築したりする場合でも、DIVIはレスポンシブデザイン数学をすべての人がアクセスできるようにします。 Divi内でどのようにスムーズにcalc（）が動作するかをテストしたいですか？ Divi Public Alphaを今すぐダウンロードして、自分で体験してください。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトを移行する前に少し待ちます。