calc()で計算した値をCSSで使おう

このレッスンでは、calc()関数を使った計算による値の指定方法を学び、単位の異なる値同士を組み合わせたレイアウトを組めるようになることを目標にします。「CSS calc 使い方」で調べている方向けです。

calc()を使うと、CSSの中で「100% - 40px」のように単位が異なる値どうしの計算ができます。「画面いっぱいから、余白の分だけ引いた幅」のような、レスポンシブなレイアウトを組むときに役立ちます。

サンプルコードでは、固定幅80pxの.sidebarを左に配置し、.mainの幅をcalc(100% - 100px)で「画面幅からサイドバー分を引いた幅」として計算しています。サイドバーの幅を変えても、メイン領域が自動的にちょうどよい幅に調整される点を確認してみましょう。

初心者がよくつまずくのが、calc()の中の演算子の前後に必ずスペースを入れる必要がある点です。calc(100%-40px)のようにスペースなしで書くとエラーになり、正しく計算されません。calc(100% - 40px)のように、必ずスペースを空けて書くのがルールです。

パーセントとピクセルのように、本来なら単純に足し引きできない単位同士もcalc()の中でならまとめて計算できます。固定サイズのサイドバーと可変サイズのメイン領域を組み合わせるレイアウトでよく使われます。