【CSS】スタイルシート内で計算式が使えるcalc()が便利

村上 著者:村上

【CSS】スタイルシート内で計算式が使えるcalc()が便利

Webページを作成している中で、この要素の横幅は画面サイズから20pxを引いたサイズにしたい!など、計算が必要となる場面があると思います。
その場合は、Javascript もしくは jQueryで処理をすることが多いかと思いますが、CSSの calc() という関数でも同じ処理を行えるというので試してみました。

 

まず、jQueryで要素のリサイズをする処理は下記のように記述していました。
なお、今回サイズを指定したい要素は、IDに「content」という名前が指定された要素にしています。

// 要素の横幅指定
var width = $(window).width() - 20;
$("#content").width(width);

で、同じ処理をCSSでは下記のように指定します。

#content {
    width: calc(100vw - 20px);
    width: -webkit-calc(100vw - 20px); /* iOS対応 */
}

ちなみに、vw とは、ビューポートの幅を 1/100 した単位のことです。
ビューポートの幅とは画面の横幅のことを指すので、100vw は 画面の横幅のサイズになります。
なお、画面の高さを取得したい場合は、100vh と記述してください。

個人的な感覚かもしれませんが、コードがすっきりしたように感じます。
見た目にも、何をしているのかが分かりやすいですし、私はこちらの方が好みですね。
もちろん、実行後の画面は jQueryでもCSSでも全く一緒なので、お好みの方を使えば良いかと思います。

私のように、Javascript側で要素のリサイズ処理をしたくない派の方は、是非こちらを使用してはいかがでしょうか。

  • この記事いいね! (0)

著者について

村上

村上 administrator

1件のコメント

【CSS】CSSで計算式を扱うためのcalc()関数が使えない時の対処法 – 株式会社シーポイントラボ | 浜松のシステム開発会社投稿日:7:39 pm - 6月 6, 2018

[…] 【CSS】スタイルシート内で計算式が使えるcalc()が便利 https://cpoint-lab.co.jp/article/201801/【css】スタイルシート内で計算式が使えるcalcが便利 […]

現在コメントは受け付けていません。