【毎日webデザイン】CSSのwidthににたまに出てくるclacの意味知ってます？？

なんだっけ？？
width　にたまに出てくるclacの意味知ってます？？

webデザイン工程では使用しないTHMLとCSSなどの言語は、残念ながら忘れるので、ここにログ的に残していきたいと思います。

ゆくゆくは、webデザイン学習中のみなさまの毎日学習のお役に立てますように！

例えば、

@media only screen and (min-width: 992px)

.l-main {
width: calc(70% -40px);
margin-bottom: 0;
}

width: calc(100% – 40px); は、要素の幅を画面幅から左右の余白の40px分引いたサイズに設定します。

calc関数の中でcalc関数を使用することを入れ子といいます。たとえば、div{ width: calc(calc(100px + 50px) * 20px); } は入れ子です。

calc関数は、<length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> が利用できる場所ならば使用できます。

CSSのcalc関数は、一般的な数式と同様の優先順位で計算されます。

• 加算(+)、減算(-)よりも乗算(*)、除算(/)が優先されます。

• 掛け算と足し算が並んでいる場合は、掛け算から先に計算されます。

• 丸括弧（()）で括ることで計算式の優先順位も決められます。

また、CSSは「一番最後（下）に書いたものが優先される」という特徴があります。ブラウザはHTMLやCSSを上から順番に読み込んでいくので、基本的に後から読み込んだスタイルを最優先して適用させます。

もっと詳しく知りたい方は、以下をご参照ください。

CSS で計算（四則計算）が行える calc() 関数を使ってみよう

頭の体操にもなりそう！！
最後まで読んでくれてありがとうございました！
今日もいい1日になりますように・・・