CSSの`calc()`は、数値を計算するための関数です。主にレスポンシブデザインで使用され、画面サイズに応じて要素のサイズを自動的に調整するために使われます。 `calc()`は、以下のような構文を持ちます。 ```css width: calc(式); ``` 式には、四則演算や括弧を含む数式を記述します。また、`calc()`の中には、単位を含む数値を使用することができます。 ## 例1: 要素の幅を画面サイズに合わせて調整する例えば、以下のようなHTMLとCSSがあるとします。 ```html-preview

``` この場合、要素の幅は画面サイズに合わせて100%になりますが、最大幅が600pxに制限されています。しかし、画面サイズが600px以下の場合、要素の幅は100%になりますが、600pxを超える場合は最大幅が600pxになってしまいます。そこで、`calc()`を使って以下のように書き換えます。 ```html-preview

``` この場合、要素の幅は画面サイズに合わせて100%になりますが、20px分狭められた幅になります。つまり、画面サイズが600px以下の場合、要素の幅は100%になりますが、600pxを超える場合は20px分狭められた幅になります。 ## 例2: 要素の高さを画面サイズに合わせて調整する以下のようなHTMLとCSSがあるとします。 ```html-preview

``` この場合、要素の高さは画面サイズの50%になりますが、親要素の高さに依存してしまいます。そこで、`calc()`を使って以下のように書き換えます。 ```html-preview

``` この場合、要素の高さは画面サイズの50%になりますが、20px分狭められた高さになります。つまり、画面サイズが小さくても、要素の高さが20px分狭められることで、画面に収まるようになります。

スキル図鑑

.css-x7cx95{padding:var(--chakra-space-2);}@media screen and (min-width: 600px){.css-x7cx95{padding:0px;}}calc()

クイズにチャレンジしよう！

calc()