CSS Calc（）関數(shù)は、StyleSheetsで數(shù)學(xué)的操作を?qū)g行することにより、Webページ要素の動(dòng)的なサイジングを可能にします。 ％、PX、EM、REMなどのユニットを混合し、その場(chǎng)で値を再計(jì)算することにより、柔軟性を可能にします。 1.間隔調(diào)整で幅を設(shè)定するなど、レスポンシブレイアウトに役立ちます：幅：calc（100％-20px）;。 2.マージンやパディングを因數(shù)分解することにより、グリッドまたはフレックスボックスレイアウトの動(dòng)的なギャップを維持するのに役立ちます。 3. Font-Size：Calc（16PX 2VW）のような流動(dòng)的なタイポグラフィをサポートします。 4. CSS変數(shù)と組み合わせると、再利用可能で保守可能なコードを促進(jìn)します。重要なヒントには、オペレーターの周りのスペースの使用、過(guò)度に複雑な式の避け、最適な結(jié)果のためにデバイス全體でテストすることが含まれます。

Webページに他の値に基づいて動(dòng)的にサイズするために要素が必要な場(chǎng)合、CSS calc()関數(shù)は強(qiáng)力なツールです。これにより、StyleSheetsで數(shù)學(xué)的操作を?qū)g行することができ、JavaScriptや固定サイズのみに依存することなく、柔軟で応答性の高いレイアウトを簡(jiǎn)単に作成できます。

なぜcalc()を使用するのですか？

calc()の主な利點(diǎn)は柔軟性です。さまざまなユニット（パーセンテージ、ピクセル、EMS、REMなど）を組み合わせると、その場(chǎng)で値を再計(jì)算できます。これにより、他の既知の値に基づいて調(diào)整するために、間隔、幅、高さ、またはフォントサイズが必要な狀況に最適です。

例えば：

幅：calc（100％-20px）;

この行は、ブラウザにコンテナの全幅を取得し、20ピクセルを差し引くことを指示します。これは、ボックスモデルを変更せずにパディングや境界線を占める場(chǎng)合に役立ちます。

動(dòng)的なギャップを備えたレスポンシブレイアウト

一般的なユースケースの1つは、畫面サイズに調(diào)整しながら要素間の間隔を維持するレイアウトを作成することです。各列が幅30％であるだけでなく、両側(cè)に5％のマージンがあるグリッドを想像してください。

あなたはこのようなことをすることができます：

 。カラム {
  幅：calc（30％-10％）;
}

または、FlexBoxを使用していて、負(fù)のマージンを避けたい場(chǎng)合、 calc()コンテナに直接パディングまたはマージンを調(diào)整することにより、一貫した間隔を設(shè)定するのに役立ちます。

いくつかの重要なポイント：

• % 、 px 、 em 、 remなどのユニットを自由に混ぜることができます。
• 常にオペレーターの周りのスペースを含めます（ 、 - 、など）。
• すべての最新のブラウザでサポートされています。

ビューポートでスケーリングするフォントサイズ

calc()のもう1つの巧妙な使用は、流體のタイポグラフィのためです。畫面のサイズがサイズになると、最小値と最大値の間にフォントサイズをスムーズに適応させることです。

これが例です：

 font-size：calc（16px 2vw）;

これは、フォントが常に少なくとも16pxになることを意味しますが、ビューポートがより広くなるにつれてわずかに成長(zhǎng)します。すべてのサイズの変更にメディアクエリを必要とせずに、大きな畫面では小さすぎるテキストを避けます。

ヒント：

• ピクセルのベースサイズから始めます。
• vwやvhなどの相対ユニットを追加または減算します。
• デバイス全體でどのように動(dòng)作するかをテストします。

calc()とCSS変數(shù)を組み合わせます

calc()を使用してカスタムプロパティ（CSS変數(shù)）を使用すると、さらに動(dòng)的な可能性が開きます。たとえば、間隔値を一度定義してから、レイアウト全體の計(jì)算でそれらを使用する場(chǎng)合があります。

例：

 ：根 {
   - 間隔：20px;
}

。容器 {
  パディング：calc（var（ - 間隔） * 2）;
}

これにより、コードを乾燥させ、グローバルな変更がはるかに簡(jiǎn)単になります。 --spacing更新すると、計(jì)算でそれを使用するすべてが自動(dòng)的に更新されます。

留意すべきいくつかのこと：

• 別のcalc()內(nèi)のネストcalc()が許可されています。
• 數(shù)學(xué)オペレーターの周りのスペースを忘れないでください。
• 過(guò)度に複雑な表現(xiàn)を避けてください。彼らは読みにくいことができます。

それは基本的にcalc()効果的に使用し始めるために必要なものです。複雑ではありませんが、デバイス全體の構(gòu)文とテストに注意を払う必要があります。ただし、慣れると、頻繁に到達(dá)するツールの1つになります。

以上が動(dòng)的サイジングのためにCSS calc（）関數(shù)を利用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。