calc()ってなに？
calc()は、CSSで計算を行うための関数です。この関数を使用することで、要素のサイズや位置を柔軟に調整することができます。calc()は四則演算やパーセンテージなどを組み合わせて使うことができ、動的なレイアウトやデザインを実現するのに便利です。
どんな時によく使われる？
calc()は、特に要素のサイズや位置を動的に調整する必要がある場合によく使われます。例えば、レスポンシブデザインでは、デバイスの幅や高さに応じて要素のサイズを調整する必要があります。このような場面で、calc()を使用することで柔軟性の高いレイアウトを実現することができます。
calc.css
body{
height: calc(100vh - 16px);
}
上記のコードはbodyタグの高さをcalcを使って「ディスプレイの高さ100%から16px分引いたもの」となります
使う際の注意点
calc()を使う際に注意すべき点がいくつかあります。まず、ブラウザの互換性を考慮する必要があります。一部の古いブラウザではcalc()がサポートされていない場合がありますので、その点を考慮してください。
※今現在推奨のブラウザを使用する分には問題ない．
さらに、計算式の中にスペースを含める際には注意が必要です。適切な位置でスペースを入れる必要があります。Javaなどに慣れていた自分はココで一度詰まった．
正しい例
calc.css
body{
height: calc(100% - 16px);
}
悪い例
calc.css
body{
height: calc(100%-16px);
}
四則演算記号の左右に空白がないとダメだよ！！！！
これらの注意点を踏まえつつ、calc()を使うことで柔軟で動的なレイアウトを実現することができます。