Light TALK Plus＋ vol.8 ～今更聞けないcalc()関数～
こんちは～Light Web社員の2号（ニゴウ）です。
まだギリギリ6月とは思えないほど毎日暑いですね😑
しばらくはジメジメした梅雨も続きそうですし、体調管理には気を付けましょうね🤞
「Light TALK Plus＋」とは…
社員2号が気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマはこちら！
「今更聞けないcalc()関数」
今年の2月頃、2019年のCSS利用者調査アンケート「The State of CSS 2019」が行われました。
アンケートの中で「よく使用するCSSのプロパティ」として、なんと90%以上の人が「calc()」をあげています。
calc()関数とはどんなものなのでしょうか？
calc()関数とは？
calc()関数を簡単に説明すると、「プロパティの値を自分で計算する必要がなく、計算式で値を指定をできる」、というものです。
この関数の凄いところは、計算式を指定する際に単位を揃える必要がないところです。
つまり、divのheightを指定する時に「100%の高さからheader分の100pxだけ引いた数」
などと指定することができるのです！
ちなみに、足し算、引き算、掛け算、割り算の4つの演算子が使えるため、
簡単な数式なら問題なく使うことができます。
記述方法
記述方法はとても簡単でcalc()の()内に計算式を入れるだけです。
.lightweb {
height: calc(100% – 100px);
}
上の式は引き算ですが、足し算の場合は「+」、掛け算の場合は「*」、割り算は「/」を
それぞれ上の式の「-」のところに入れればOKです。
掛け算・割り算の場合は、単位のついた数字 × or ÷ 単位なしの単純な数字である必要があり、
特に割り算の場合は右側には単位付きの数字はおけないことになっています。
下記のような入れ子計算もできます！
.lightweb {
height: calc(100% – calc(100px * 2));
}
対応ブラウザ
calc()関数はopera miniを除くすべてのメジャー最新ブラウザで対応しており、IEでもバージョン9以上であれば問題なく使うことができます。
これはもう使わないと勿体ないですね！
いかがでしたでしょうか？
まだ使ったことがなかったよ、という方は是非試してみて下さいね😄
ちなみに…社員2号は、本日をもってライトウェブを卒業します😿
今回が最後の更新となりますが、もしかしたらLight TALK Plus+も生まれ変わって続くかもしれませんので、その時は是非皆様応援のほどよろしくお願いします✨
今まで有難うございました🥰
♪･*:.｡. .｡.:*･♪ﾟ･*:.｡. .｡.:*･♪ﾟ･*:.｡. .｡.:*･♪ﾟ･*:.｡. .｡.:*･♪
Light Webからのお知らせ
ライトウェブはプライバシーマークを取得しました！
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します！
♪･*:.｡. .｡.:*･♪ﾟ･*:.｡. .｡.:*･♪ﾟ･*:.｡. .｡.:*･♪ﾟ･*:.｡. .｡.:*･♪
