スポンサーリンク

CSS: widthなどの数値を自動計算してくれる神機能「calc」

この記事は約5分で読めます。

イメージ

こんにちは、さち です。

CSS には「margin」「padding」「width」「height」など
数値を指定するプロパティがたくさんあります。

ただ、サイトの構造が複雑になると
固定の数値を指定するだけでは足りない場面もあり
数値を自動算出して欲しいと思うことが…。

そんなときに超便利なのが「calc」です。
「calc」は CSS(CSS3) の標準機能なので前準備は不要。
今すぐ使えます。

スポンサーリンク

「calc」で式を書けば数値を計算してくれる

「calc」は計算式を書くとそれを自動計算してくれる
CSS(CSS3) に標準で備わっている機能です。

例えば、「width」の値をこう書けば自動的に「33.3333…%」と計算してくれます。
割り切れない数を指定するのが簡単になりますね。

.OneThird {
  width: calc(100% / 3); /* =33.3333…% */
  float: left;
}

 

<div class="wrap">
  <div class="OneThird">left</div>
  <div class="OneThird">center</div>
  <div class="OneThird">right</div>
</div>

 

サンプル

「こんなの display: table-cell; 使えばいいじゃん」という
ごもっともな意見もあるかと思いますが
%指定だと面倒な隙間なし3等分も一発!という見本なのでお許しを…。

計算記号(演算子)は下記のとおり。
基本的にエクセルなどと同じなので簡単です。
表

下記のような決まりがありますが別に覚えなくていいです。
意識しなくても自然とそういう式を書くはずですからね。

  • 「かけ算」は、引数の少なくとも1つは数量(単位なし数値)にする
  • 「わり算」は、右側は数量(単位なし数値)にする

計算する順番は通常の四則計算と同じ(かけ算、わり算が先)です。
「カッコ」を使うことで計算の順番を指定ができます。
この辺もエクセルなどと同じですよね。

.class1 {
  width: calc((100px - 20px) / 2); /* =40px */
}

.class2 {
  width: calc(100px - 20px / 2); /* =90px */
}

 

単位(%, px, em など)ゴチャ混ぜOK

計算に使う単位はゴチャ混ぜでOK。
この仕様、控えめにいって神。これで勝つる!

例えば、幅を 66.6666…% から 30px だけ小さくすることも非常に簡単です。

.wrap div {
  float: left;
}

.left {
  width: calc(100% * 2 / 3 - 30px); /* =66.6666…%より30px小さい */
  margin-right: 30px;
}

.right {
  width: calc(100% / 3); /* =33.3333…% */
}

 

<div class="wrap">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

 

サンプル

適切な width を「calc」が計算してくれるので
.warp の width を動かしまくっても
30px の margin-right を維持したままレイアウトは崩れません。

昔なら HTML, CSS を工夫したり、JavaScript でやっていたことが
「calc」を使えば CSS だけで簡単にできます。

横幅を固定しないサイトを作るときに無茶苦茶便利ですよね。
革命的!便利すぎる!もっと早くに知りたかった…。
定期的にちゃんと CSS を勉強しないといけませんね。

あとは、padding, border を使いつつ width を調整して
要素全体の幅を親要素の 50% にしたいなんてときとかにも便利かも。
(これは box-sizing: border-box; でも解決するけれど)

「+」「-」の前後には必ず半角スペースを!

「+」「-」の計算記号(演算子)の前後には必ず半角スペースを入れましょう。
そうしないと「calc」が動作しません。

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

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

例えば、「-5px」は
ひき算ではなく負の値「-5」と見なされ「calc」がはたらきません。

「*」「/」の計算記号(演算子)は
前後に半角スペースがなくても問題ないですが
「+」「-」と同じく半角スペースを付けておいた方が無難です。

対応ブラウザ

表

ベンダープレフィックスが必要なバージョンも一部ありますが
結構対応してますよね。

未対応ブラウザ用に、calc を使わない値も書いておいた方が安心かもしれません。

.class {
  width: 99%; /* 未対応ブラウザ用 */
  width: -webkit-calc(100% - 5px); /* iOS 6 用 */
  width: calc(100% - 5px);
}

例では、「width」ばかりで「calc」を使いましたが
数値を扱うプロパティであれば何にでも利用できます。
ものすごく便利なのでぜひ使いましょう。

【参考サイト】

→ calc - CSS | MDN
→ calc() - Can I use...

コメント

タイトルとURLをコピーしました