Webサイトの作成時に要素の配置が思い通りにならず困ることはありませんか。そのようなとき、CSSで計算を行うことで正確に要素を配置することができます。
CSSで計算を行うには、calc()関数を使用します。calc()関数を使用すれば要素の均等な配置やレスポンシブ対応を簡単にできます。
この記事ではcalc()関数の使い方を解説します。実際にcalc関数を使用する場面などを紹介するので参考にしてみてください。
- calc()関数とは
- calc()関数の使い方
- calc()関数の注意点
- calc()関数の使用例
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
calc関数とは
calc関数はCSSで四則演算（足し算・引き算・掛け算・割り算）ができる関数です。
以下の記号を用いて、関数内で四則演算をします。
| 計算方法 | 演算子 |
|---|---|
| 足し算 | + |
| 引き算 | - |
| 掛け算 | * |
| 割り算 | / |
calc関数の使い方
記述方式
calc関数の記述例は以下の通りです。
div{
width: calc(100px + 20px);
}またcalc関数では違う単位同士の計算も可能です。
div{
width: calc(100% + 20px);
}四則演算の優先順位
calc関数内での四則演算にも優先順位があります。優先順位は一般的な数式と同様に以下の通りです。
- かっこ内にある数式
- 掛け算・割り算
- 足し算・引き算
例えば、次のような計算式があるとします。
div{
width: calc((100px + 50px) * 20px);
}この場合はかっこ内の100px + 50pxが先に計算されます。値は150px * 20pxの計算結果となります。
入れ子での記述
calc関数は入れ子の構造にもできます。calc関数の中でcalc関数を使用することを入れ子といいます。
div{
width: calc(calc(100px + 50px) * 20px);
}内部の関数はかっこ式として扱われます。
calc関数の注意点
「+」「-」の前後には半角スペースを入れる
足し算や引き算を行う場合には「+」「-」の前後に半角スペースを入れる必要があります。「+」「-」はプラスの値、マイナスの値という意味も持っています。このため半角スペースを入れないと数値の正負として判断されてしまうのです。
「*」「/」の前後には半角スペースを入れる必要はありません。
単位をつける数値の使い分け
calc関数内の数値には単位が必要です。ただし、足し算・引き算の場合と掛け算・割り算の場合で単位のつけ方が変わるので注意が必要です。
足し算・引き算の場合
足し算・引き算の場合には両方の数字に単位をつける必要があります。単位を入れ忘れると正常な計算ができません。
かけ算・割り算の場合
かけ算・割り算の場合には単位のある数字同士だと計算できません。かける数と割る数には単位をつけないようにしましょう。「後に記述する数字に単位をつけない」と覚えておくと簡単です。
0で割ってはいけない
割り算をする場合には0で割ってはいけません。0で割った場合の計算結果が定義できないためです。厳密には数学上のルールとして禁止されているわけではありませんが、この記事では「0で割ってはいけない」としています。
calc関数を使用できるプロパティ
calc()は全てのプロパティで使用できるわけではありません。
calc()が使えるCSSのプロパティには以下のものがあります。
基本的によく使用するプロパティが多いのですぐにアウトプットすることができます。
calc関数が使えるプロパティ一覧
- width
- height
- margin
- padding
- border-width
- font-size
- text-shadow
- transform
- animation
- transition
これらのプロパティにはある特徴があります。
それぞれ、length（距離）、frequency（周波数）、angle（角度）、time（時間）、 number（実数）、integer（整数）のデータ型の値になっています。
上記以外にもこれらのデータ型の値のプロパティであればclac関数を用いて値を設定することができます。
calc関数の使用例
calc関数を使用すれば要素の均等な配置やレスポンシブ対応が非常に簡単に行えます。レスポンシブ対応ではブレークポイントごとに書き直す必要はなく、CSSの保守性の面でも優れています。
要素の横幅を3等分にする
横並びの3つの要素を均等な横幅にしたい場合などにcalc関数が有用です。
例えばある要素の横幅を3等分にしたい場合、%での指定だとwidth: 33.3%;などと指定します。しかしこの方法だと厳密には3等分になりません。そこでcalc関数を使用すれば完全に均等な配置が可能になります。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
今回はwidthを例にしました。heightなどにも同様の指定が可能です。
2カラムレイアウトで固定幅と可変の幅を設定する
メインコンテンツとサイドバーがある2カラムのレイアウトを例にしてみましょう。メインコンテンツの幅を可変に、サイドバーは固定にしたい場合にcalc関数が役立ちます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
画面幅変更時にメインコンテンツのみwidthが可変となります。
calc関数の対応ブラウザ
calc関数は現在対応している主要ブラウザであれば、基本的に全てのブラウザで対応しています。
詳しくはcalc() - CSS: カスケーディングスタイルシート | MDNをご覧ください
まとめ
calc関数は異なる単位同士で四則演算を行えます。このため要素の正確な配置やレスポンシブ対応の効率化などに有用です。calc関数を使用する場面はそれほど多くありませんが、制作を行う上で柔軟な対応ができるよう覚えておきましょう。
calc()関数まとめ
- CSSで四則演算を行える関数
- 違う単位同士の計算も可能
- 要素の均等な配置やレスポンシブ対応に有用
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
