こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web制作をしていると、「数値の足し算や引き算をCSSでどうやって表現するの？」と疑問に思うことはありませんか？
そんなときに便利なのが、CSSの calc() 関数です。
この関数をうまく使えば、レスポンシブ対応のレイアウト調整やデザインの微調整が柔軟に行えます。今回は、初心者にも分かりやすくcalc()の基本から実践的な使い方までを紹介していきます。
calc()関数ってなに？
calc() 関数は、CSSで異なる単位を計算するための便利な関数です。
例えば、width: calc(100% - 40px); のように書くことで、全体幅から特定のピクセル数を引いた値を設定できます。
- パーセントとピクセルの混合計算が可能
- 足し算（ + ）、引き算（ - ）、掛け算（ * ）、割り算（ / ）が使える
- スペースを入れることが必要（例：`calc(100% - 40px)`）
1. 相対的な固定要素の配置
例えば、右サイドに表示したい固定メニュー。
左にメインコンテンツがある場合、calc() を使ってスペース分を引くことで、ちょうどよく配置できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
.sidebar { position: fixed; right: calc(100% - 500px + 20px); } ポイント： レイアウト全体の幅が変わっても、常にバランスよく配置できるようになります。
2. 天地左右の中央に配置
上下左右の中央に要素を配置したいときにも calc() は便利！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
.center-box { position: absolute; top: calc(50% - 100px); left: calc(50% - 150px); width: 300px; height: 200px; } なぜ使うのか？
transformを使う方法もありますが、要素サイズが決まっている場合は calc() の方がわかりやすいこともあります。
3. 相対的なフォントサイズの設定
フォントサイズも calc() を使えば、ベースサイズに応じて柔軟にコントロール可能。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
h1 { font-size: calc(1rem + 0.5vw); } ポイント：画面幅に応じてフォントサイズが微調整されるため、より洗練されたデザインになります。
4. 背景を右下に配置
背景画像をコンテンツにかぶらないように右下に配置したいときも calc() が使えます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
.hero { background-position: calc(100% - 40px) calc(100% - 40px); } なぜ使うのか？
画面のサイズが変わっても、常に余白を保った背景配置が可能です。
5. 要素の横幅を3等分にする
例えば、カードを横に3つ並べたいとき。間の余白を引いた上で3等分するには以下のようにします。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
.card { width: calc((100% - 40px) / 3); margin-right: 20px; } 最後の要素だけ margin を外す工夫も必要ですね！
まとめ
calc() 関数は、レスポンシブレイアウトやピクセル単位の微調整に欠かせないCSSテクニックです。
初心者のうちは「ちょっと難しそう…」と感じるかもしれませんが、実際に使ってみると驚くほど便利！
まずは上記のような具体的な場面で calc() を取り入れて、少しずつ慣れていきましょう。
satokotadesignキャンペーン実施中！
