【プログラマー大注目！】CSSの新機能calc() を使いこなす方法

CSS3のcalc()関数を利用すると、プロパティの値を数学演算できます。

例えば、calc()を使えば、要素の幅に固定のピクセル値を宣言せずに複数の数値の加算の結果により幅を指定できます。
 

 

 

なぜcalc()を使うか？

主に2つの理由があります。

 

1つには、異なる単位を組み合わせて使えるからです。

具体的には、パーセンテージやビューポート単位などの相対的な単位とピクセルのような絶対的な単位を組み合わせられます。

 

もう1つの理由は、calc()では式の計算結果の値ではなく、計算結果として求められる値それ自体が式となるからです。

CSSプリプロセッサで数学演算する場合、ブラウザーに与えられる値は数式の計算結果の値です。しかし、calc()ではブラウザーが構文解析する値は実際のcalc()の式です。

つまり、ブラウザーの値はビューポートの値の変化に伴って変化するということです。要素の値、例えば高さを、ビューポートから絶対値を減算した値に設定し、その値がビューポートの値の変化に伴い変わるようにできるのです。

 

 

 

calc()の利用

calc()を使ってプロパティの数値の加算、減算、乗算、除算ができます。

 

 

 

 

calc()のネスト

calc()はネストもできます。ネストされる関数は単純に丸括弧でくくられます。

この関数の計算結果の値は次のコードの結果となります。

 

 

 

 

代替となる固定値を用意する

calc()に対応するブラウザーは増えてきています。

しかし、calc()に対応しないブラウザーではすべてのプロパティ値の式が無視されます。ですので、対応していないブラウザー向けに代替的な固定値を用意します。

 

 

 

calc()はどんなときに使えるか？

次にcalc()関数が利用できる例を挙げます。

 

例1 ：要素を中央に配置する場合

コンテナの中で横方向又は縦方向の中央に要素を配置する場合にcalc()が使えます。calc()を使わない通常の方法では、子要素の寸法が分かればネガティブマージンを使って要素を高さと幅の半分の位置に動かします。

 

 

calc()関数を使うと、topとleftプロパティのみの指定で済みます。

 

 

Flexboxが使える場合、calc()の利用は必要ありません。しかし、それが使えない場合、この方法は有効です。

 

 

例２：ルートグリッドのサイズを設定する場合

rem単位を使ってビューポートに基づくグリッドを作成するのにもcalc()が使えます。そうするには、ルート要素のフォントサイズをビューポート全体の幅の何分の1かに設定します。

 

 

1remはビューポートの幅の30分の1です。
 
 

例３：明確さを重視する場合

最後に、calc()を使うと計算が分かりやすくなります。

 

 

 

 

この記事ではcalc()を紹介しました。グリッドシステムの構築などほかにもcalc()を使ってできることはたくさんあります。calc()は新しいCSSの機能の中でも特に役立つ機能の1つと言えるでしょう。

 

 

 

 

※本稿は 「How calc() Works」を翻訳・再編集したものです。