【CSS】calc()を使った可変レイアウト

CSSのcalc()関数を使って片方は可変、もう片方は固定させた2カラムのレイアウトを実装する方法を紹介します。サイドバーは常に固定させてメインコンテンツだけ可変させて表示したいといった場合にcalc()関数を利用すれば簡単に実現することができます。

calc()関数とは？

calc()関数とは、簡単に言うと四則演算を使った計算式を書くことができる関数で、通常、widthやheightなどで指定するpxなどの値をcalc()を使って値を指定することができます。

calc()が使用できる場所

calc()を値として指定できる場所は、width、height、margin、paddingといった長さを指定する場所やline-heightなど数値を指定する箇所などで使用することができます。

calc()の使い方

calc()を使って計算式を記述する場合は、普段「100px」「100％」などを指定している場所に記述していきます。計算式は、足し算「+」、引き算「-」、かけ算「*」、割り算「/」といった記号を使って計算します。例えば、幅80％のボックスに50pxだけ足したいといった場合には、以下のように記述します。

.box {
  width: calc( 80% + 50px );
}

なお、記号の前後には空白を入れる必要があります。また、上記のように異なる単位を組み合わせて計算することもできます。ただし、掛け算と割り算に関しては、記号の後ろ（右側）にくる数値に単位をつけることはできません。

.box {
  width: calc( 2em * 5 );
}

calc()を使った可変レイアウトを作る

それでは、calc()の計算式を使って可変ボックスと固定ボックスを組み合わせた2カラムのレイアウトを作る場合の記述方法を見ていきます。

#wrap {
  overflow: hidden;
}
#contents {
  float: left;
  width: calc(100% - 250px);
}
#side {
  float: right;
  width: 250px;
}

各カラムはfloatを使って横並びにします。そして、可変にしたいボックスのwidthに対してcalc()を指定します。計算式は横幅100％から固定幅のサイズ分だけ引いてあげることで、可変ボックスと固定ボックスを組み合わせたレイアウトを作ることができます。

以上が、calc()を使った可変と固定のボックスを組み合わせた2カラムレイアウトの作成方法となります。