CSS「calc」の使い方
2023年11月11日
11月になり、日にちが経ちますが…
気温もだんだん変化が感じられる頃、朝と夕は少し冷えるぐらいの気温になってきてますね…
木の葉っぱの色もだんだんと色が変わってきてますね。
街の周りを見回すとそろそろクリスマスシーズンの準備をしている店舗が見かけるようになりましたね。
秋の季節を感じられる頃、気温の変化の差が激しい中、インフルエンザ予防としてワクチンが不足しているみたいですが、体調管理はしっかりしてくださいね。
さてと、話題に戻して…
CSS「calc」の使い方
CSSで数学の四則演算(足し算・引き算・掛け算・割り算)を可能にする関数です。
calc()関数は現在ほとんどのメジャーブラウザにおいてサポートされています。
デモ
https://developer.mozilla.org/ja/docs/Web/CSS/calc
よく使われる、レスポンシブ対応の中に「display:flex;」を使ったときに、子要素に「width:calc(100% / 3 – 10px);」に使われることが増えてきてるかと思います。
「calc()」の使い方の注意事項があります。
四則演算を記述するときは間に半角を開けておいてください。
そのままくっついて入力すると反映ができませんので、気を付けてください。
世の中のWeb技術が日々に進歩しているので、技術を向上してお客様に満足を得られるように頑張っていきましょう。
ではまた!