こんにちは！
実習生の石川です。

今日は11/11ということで、ポッキー＆プリッツの日ですね。

https://cp.pocky.jp/gift/products/
Pocky THE GIFTというギフト用のポッキーを紹介しているサイトのデザインとコンセプトがイケてるので見てください。

さて、今日は便利なCSSプロパティを教えていただいたので紹介します。
それはcalcです。

↓MDN
https://developer.mozilla.org/ja/docs/Web/CSS/calc()

読み方は知りませんが、僕はカルクと呼んでます。
調べるとどうやらキャルク、またはキャルキュと呼ぶらしいです。

このcalc、CSSで計算式が書けるプロパティとなっており、例えば「デバイス幅から20px引いた大きさの幅にしたい」とか「100%を3で割りたい」など一見どうしたらいいのかわからないような課題を解決してくれます。

例えば「デバイス幅から20px引いた大きさの幅にしたい」

世の中には数えきれないほどのデバイスサイズがあります。
例えばiPhone Xの横幅375pxですが、iPhone SEは320pxです。

すべての画面幅が375pxであれば、「デバイス幅から20px引いた大きさの幅」は375-20で355pxということになりますが、355pxだとiPhone SEでは画面幅より大きくなってしまい、表示が崩れてしまう可能性があります。

そこで活躍するのがcalcです。
width:calc(100% – 20px);
このように指定すると、画面幅から20px引いた数値（iPhone SEでは320-20で300px）になるのでとても便利です。

まだまだ書きたいことがあるのですが、長くなってきたので明日に続きます！！