どうも、こんにちわ！
妻が出産への立ち合いを希望されてるのですが、コロナ禍の為出産に立ち会えない可能性が高いゆずのすけです。ちなみに血がめちゃくちゃ苦手です。笑
今回は、CSSの幅や高さを計算する際に便利なcalc()というファンクションを解説していきます。
目次
calc()ファンクションとは？
calc()ファンクションは、レイアウトやサイズ指定に計算式を使えるようにしてくれるモノです。
普通、pxやem、％のように幅や高さなどを指定しなければいけませんが、calc()を使う事で
|
1 |
width: calc(100px + 35px); |
|
1 |
width: calc(1000px - 20%); |
などのような計算式を使って値を求めることが出来るようになります。
また、上記の例のように、calc()を使えば異なる単位同士でも計算することが出来ます。
calc()で使用できる記号
calc()では計算式を書くことができます。
calc()内で使用する事の出来る記号は以下の通り
+ … 加算
- … 減算
* … 乗算
/ … 徐算
＋とーの前後には半角スペースが必要です。
例えば、横幅を1000px-20%としたい場合にはcalc()でこう書きます。
width: calc(1000px – 20%);
横幅に対して、高さをその半分にしたい場合…
横幅が100%の場合、以下のように書くことで高さをその半分にできます。
width: 100%;
height: calc(100% / 2 );
親の要素よりも少し、フォントサイズを大きくしたい場合
以下のように書けば、親のフォントサイズ1emよりも2pxだけ大きくできます。
font-size: calc(1em + 2px);
calc()の使用できる場所
calc()は、CSSの中で
length … 長さ
angle … 角度
time … 時間
number … 数量
などを利用する場所でも使うことができます。
まとめ
いかがでしたか？
CSSでの値を簡単に計算してくれるcalc()を今日は紹介しました。
値を指定する際に覚えておくと非常に便利ですよっ！
今回の記事があなたの役にたてば幸いです。
