東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

calc()関数について

2018.03.23 Posted by

図1

こんにちは、ウェブラボ技術メモです。
今回はcalc()関数についてご紹介します。

■calc()関数とは?
簡単に言うとプロパティの値を計算式で導出できる関数のことです。
対応ブラウザなど詳しくはこちらをご覧ください。

■使い方
calc()関数は様々な活用シーンがあります。
例えば、
横幅100%を三等分したい時には、以下のように記述し並列に均等配置することができます。つまり割り切れない数字の値に使うことができるそうです。

他にも要素のセンタリングや文字サイズを可変に設定することができます。

最近、私が便利だと思ったのは
親要素の横幅を超えてある子要素だけを横幅100%に配置する使い方です。
以下のような記述をします。

ネガティブマージンをcalc関数を使って算出しています。
ウィンドウ幅の100%(100vh)から親要素の幅(100%)を引いて2で割ります。これで親要素の両脇のマージンの幅がわかります。
最後に、ネガティブマージンなのでマイナスになるように-1をかけます。(上図参照)

とても便利なので是非皆さんも使ってみてくださいね!
以上、技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278