【毎日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を上から順番に読み込んでいくので、基本的に後から読み込んだスタイルを最優先して適用させます。
もっと詳しく知りたい方は、以下をご参照ください。
頭の体操にもなりそう！！
最後まで読んでくれてありがとうございました！
今日もいい1日になりますように・・・