株式会社I-SEED(アイシード)|大阪・心斎橋のWEB制作集団

幅や高さの計算ならCSS3のcalc()関数が便利

幅や高さの計算ならCSS3のcalc()関数が便利

KAGKAG
この記事は、2019年11月18日に編集し、約 5 分で読めます。

こんにちは。ぐうたらコーダーのKAGです。
本日はCSS3の超便利な関数calc()を紹介します。

calc()ってなんだ?

CSSで四則演算ができる関数です。

calc()で四則演算ができるメリットって?

  • ボックスを均等な幅かつ可変サイズで、余白は固定pxで並べたい時
  • 左右に20pxの余白を取りつつ画面いっぱいに要素を表示したい時
  • 固定幅のボックス+可変幅のボックスを横並びにしたい時

等に自分で計算する必要がなくなります。

レスポンシブデザインなWebサイトが増えた今、かなり使い勝手がよく便利な関数です!

calc()
CSS の calc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 length, frequency, angle, time, percentage, number, integer が利用できる場所ならば使用できます。

calc()の使い方

数値を指定したいプロパティの中にcalc()を入れるだけ!
数字で指定するプロパティならどこでも使える(はず)

使い方の例

こんな感じ


.parent{
  width:100%;
  padding:0 20px;
}

/* 親要素が取っている余白からはみ出して画面いっぱいに表示させたい時とか */
.child{
  margin: 0 -10px;
  width: calc(100% + 20px);
}

これで指定した要素の幅が自動的に100%+20pxになるように計算してくれます。

使える式

calc()で使える式は

  • 足し算( + )
  • 引き算( – )
  • 乗算( * )
  • 除算( / )

以上の4種類です。

足し算と引き算の前後はスペースあけないとエラーになります。
乗算と除算はあけなくても大丈夫ですが、私は時々こんがらがるので一律空けてます。
除算を使うとき、計算式の右側に入れられるのは数字だけです。
乗算を使うときもどちらか片方の数値が単位のない数字でないといけません。
ここに「em」や「vw」など何かしら単位を入れたら表示が崩れるのでやめておきましょう。

入れ子の計算もOK!

calc()は入れ子の計算もできます。

例えば4つのカラムを並べ、間の余白は20pxずつ取りながら、最初のカラムと最後のカラムは両端に並べたい時などに便利です。

HTML

<div class="parent">
  <div class="child">
    <p>箱です</p>
  </div>
  <div class="child">
    <p>箱です</p>
  </div>
  <div class="child">
    <p>箱です</p>
  </div>
  <div class="child">
    <p>箱です</p>
  </div>
</div>

CSS


.parent{
  background: gray;
  margin:auto;
  overflow:hidden;
  padding:10px;
  width:100%;
}

.child{
  background: white;
  float:left;
  text-align:center;
  width:calc((100% - 60px) / 4);
}

/* 最初の要素以外に左マージンを追加 */
.child + .child{
  margin-left: 20px;
}

表示

箱です
箱です
箱です
箱です

こういう時は大体FlexBoxのjustify-contentでspace-betweenを使うと思いますが、事情があってFloatしか使えない時等に便利です。

各ブラウザのサポート状況

calc()関数のサポート状況

ほぼすべてのブラウザが完全対応しており、2019年10月現在の時点ではベンダープレフィックスも必要なさそうです。

今は未対応ブラウザのサポートも終了しておりますので、どんどこ使っていきたいところです。

Can I use... Support tables for HTML5, CSS3, etc

しかし…

IE11でcalc()関数を使用したページを表示する場合、表示が崩れることがあります。


.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: calc(100% / 3);
}

と表記した場合、他のブラウザでは要素が3等分されて表示されるのですが、IE11ではカラム落ちしてしまいます。


IEではcalc()関数を使う際に、割り切れない数字で割ろうとすると、数字が繰り上がってしまうようです。
この場合は100を3で割ろうとしたため、表示が崩れてしまいました。

この場合


.child{
  width: calc((100% / 3) - .01px);
}

と記載する事で回避できます。
(でもなんかイヤなんですよねえ)


その他にも

  • 入れ子の式が正しく機能しない時がある
  • calc(% + vw)の形式で記述すると正常に計算できない
  • transformの値でcalcを使うと効かない

等々…

どんどん出てくる(ヽ’A`)
calc()以外のバグも

IEは徐々にシェアが落ちているところですが、依然日本では10%以上のシェアがあり、まだ無視できない状況です。

Desktop Browser Market Share Japan | StatCounter Global Stats
This graph shows the market share of desktop browsers in Japan based on over 10 billion monthly page views.

さらにWindows10のIE11は2025年まで正式サポートされるため、向こう5年はIEを考慮してコーディングしなければいけません。イカれてやがる…

とはいえ便利なオプションである事には変わりないので、IEにも対応した記述にするそもそもWebサイトの対応ブラウザからIEを外す等で対策してください。

この記事を書いた人
KAG

間食とお絵かきが好きです。

KAGをフォローする

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください!

I-SEED は 「デザイン」「SEOマーケティング」「システム開発」を併せ持つWEB制作会社です。

コーポレート、オウンドメディア、ECなど様々な分野のサイト制作を得意としています。システム開発も自社で行っているので、様々なプロジェクトに柔軟かつ迅速に対応できるのが強みです。

大阪に良いWEB制作会社がいないとお困りの方は、是非一度 I-SEED までご相談ください。

I-SEED では随時採用も行っています。各種エンジニア、ディレクター、デザイナー、ライター、マーケターの全職種を募集しています。ご興味がある方は採用ページもご覧ください。

ブログページに戻る