calcを使うとレスポンシブコーディングに便利

css3にはcalc(カルク)というものがあります。

このcalcを使えば便利で計算式で幅や高さを指定することができます。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

calcの書き方

たとえば値と値をプラスした数値を指定することができます。

width: calc(10px + 10px);

上記は10pxと10pxを足した20pxが幅として指定されます。

もちろん(+)プラスだけでなく(-)マイナスや(*)乗算や(/)除法を使って計算することもできます。

width: calc(100% - 10px);

上記の書き方だと要素の幅100%がもし375pxだとするとそこから10pxを弾いた365pxが指定されます。

スマホの場合には画面の横幅も違うので画面100%に対して何ピクセルかを弾いた数値を設定したいときにこういった書き方もします。

入れ子を使用できる

calcは入れ子を利用することもできます。

width: calc(100% / calc(10px * 3));

上記の書き方だと100%を10pxを3でかけた値を割って計算をします。

このように複雑な演算子もできるのでレスポンシブコーディングではても便利だと思います。

ひと昔前ではcalcが使えないバージョンやブラウザなどもありましたが今ではだいぶ対応できるようになっているのでガンガン使えそうです。

コメント

タイトルとURLをコピーしました