CSSで3カラムや7カラムなどの横幅をぴったりにできる「calc関数」

レスポンシブデザインはもはや当たり前になっている今日このごろ。
皆がスマホを使っている今の時代。どんなサイトでもスマホから見られる可能性はあります。
どんなにあなたのサイトのターゲットとしているトラフィックがデスクトップからであったとしても、スマホからのアクセスを無視していいわけありません。

これからホームページを作る場合、余程の理由がない限り、レスポンシブ、スマホ対応にするべきでしょう。

さて、そのレスポンシブで作る時、たまに遭遇する「３」や「７」といった割り切れない値のコンテンツを横に並べる時。今までだと例えばカラムが「３」の場合、

column{
  width: 33%;
  float: left;
}

と書いていました。
ただこれだと1%余り、場合によっては1pxぐらい空白が出来たりします。
table-cellという方法もありますが、flexboxを使いたい場合はtable-cellは使えません。

そこでCSS上で計算式を書けるcalc関数が便利なのでご紹介します。

割り切れない数値もCSS「calc関数」でぴったりに

上の３分割を例にcalc関数を使って書くと以下のようになります。

.column{
  width: calc(100% / 3); /* 33.3333333…％ */
  display: flex;
}

100%の部分は、pxなど固定の値でも計算してくれます。

.column{
  width: calc(988px / 3); /* 329.3333333…px */
  display: flex;
}

また演算子は複数書けるので、例えば「７カラムで、それぞれボーダー8px分だけ小さい幅にする」といったとちょっと複雑なことも以下のように書くことが出来ます。

.column{
  width: calc((100% / 7) - 8px);
  display: flex;
}

calc関数を書く上で気をつけないといけないのが、演算子の前後には必ず半角スペースを入れてください。

/* 動く */
.column{
  width: calc(100% - 8px);
}

/* 動かない */
.column{
  width: calc(100% -8px);
}

また使うことの出来る演算子は以下になります。

IE8以下とAndroid 4.3以下の標準ブラウザではcalc関数は使えないので、以下のような書き方をしておくと安心かもしれません。

.column{
  width: 33%;
  width: -moz-calc(100% / 3);
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
}

今回、widthだけ紹介しましたが、marginやpadding、background-positionなどでも使うことが出来ます。それぞれ状況に合わせて試しに使ってみてください。