動的な計算のためのcalc()
calc()関数を使ってCSS内で単位を混在させ、動的な値の算術演算を行います。
「動的な計算のためのcalc()」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
calc()とは
calc()を使うと、CSSプロパティの値の中で直接、算術演算を実行できます。1つの計算式で異なる単位（px、%、rem、vw）を組み合わせることもできます。
calc()の基本構文
加算（+）、減算（-）、乗算（*）、除算（/）をサポートしています。+演算子と-演算子の前後にはスペースが必要です。
<div class="sidebar">Sidebar (100% - 240px)</div>単位の組み合わせ
calc()の強力な点は、通常は組み合わせられない単位を組み合わせられることです。
<div class="hero">Hero</div>
<div class="column">Column</div>CSS変数とcalc()
calc()とCSSカスタムプロパティを組み合わせて、動的なデザイントークンを作成できます。
<div class="main">Main content</div>calc()の入れ子
calc()は入れ子にできます。ただし、それぞれのコンテキストですでに計算が評価されるため、必要になることはほとんどありません。
<div class="element">Element</div>流動的なタイポグラフィにおけるcalc()
calc()を使うと、2つのサイズの間を線形補間できます。
<h1>Fluid Heading</h1>calc()での除算
除数には、単位のない数値を指定する必要があります。
<div class="thirds">Third width</div>GridとFlexboxでのcalc()
グリッドのトラック定義やflex-basisの中で便利に使用できます。
<div class="grid"><div>A</div><div>B</div></div>calc()とその他の関数の比較
使い分けは次のとおりです。
calc()：任意の算術演算。特に単位の組み合わせに使用min()/max()：複数の選択肢から最小値または最大値を選択clamp()：流動的な値を最小値と最大値の範囲内に制限
ブラウザー対応
calc()は、すべてのモダンブラウザーとIE11でサポートされています。最も広くサポートされているCSS関数の1つです。モダンなプロジェクトでは、フォールバックなしで安全に使用できます。
calc()の一般的なパターン
繰り返し使用する実践的なパターンを見てみましょう。
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>理解度チェック
「親要素の30%から20pxを引く」結果を正しく算出するcalc()式はどれですか。
まとめ
calc()を使うと、CSSで異なる単位を組み合わせた算術演算が可能になります。「ビューポート全体の幅から固定ヘッダーの高さを引く」といった動的なレイアウトや、流動的なタイポグラフィの補間に利用できます。+演算子と-演算子の前後にはスペースが必要です。CSS変数と組み合わせると、強力なデザイントークンの計算ができます。min、max、clampと併用することで、流動的なサイズを完全に制御できます。
よくある質問
「動的な計算のためのcalc()」レッスンは無料ですか？
はい。「動的な計算のためのcalc()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「動的な計算のためのcalc()」で何を学びますか？
calc()関数を使ってCSS内で単位を混在させ、動的な値の算術演算を行います。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「動的な計算のためのcalc()」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。