【CSS】calcを使って余白を調整する方法

CSSの calc() 関数を使うと、異なる単位を組み合わせて柔軟なレイアウトを作成できます。特に余白（marginやpadding）の調整に役立ちます。本記事では、calc() の基本的な使い方から、実用的なサンプルまで詳しく解説します。

calc() とは？

calc() は、異なる単位（px、%、vw など）を計算して適用できるCSSの関数です。例えば、以下のように使えます。

.element {
  width: calc(100% - 50px); /* コンテナ幅から50pxを引いた幅 */
}

これを使うことで、レスポンシブデザインにおいて柔軟なレイアウトを実現できます。

calc() を使った余白の調整方法

固定値と相対値の組み合わせ

例えば、コンテナの両側に一定の余白を確保しつつ、残りのスペースを可変にする場合、次のように指定できます。

.container {
  width: 80%;
  margin: 0 auto;
  padding: calc(5% + 10px); /* 5%の余白に10pxを加える */
}

この方法では、画面幅が変わっても余白が適切に調整されます。

ヘッダーの高さを考慮したコンテンツの配置

固定ヘッダーの高さを引いた値を calc() で計算し、コンテンツの適切な余白を確保できます。

.header {
  height: 60px;
}

.main-content {
  margin-top: calc(60px + 1rem); /* ヘッダーの高さ + 追加の余白 */
}

これにより、ヘッダーの高さが変更されても、適切な余白が維持されます。

フッターの高さを考慮したレイアウト

フッターの高さを引いた min-height を設定すると、フッターを除いた領域にコンテンツを表示できます。

.footer {
  height: 80px;
}

.content {
  min-height: calc(100vh - 80px); /* ビューポートの高さからフッターの高さを引く */
}

この方法を使うと、フッターの高さを変更しても余白の調整が不要になります。

サンプルコード

以下はdisplay: flex;を使用して3カラムを横並びにしています。

See the Pen calc by tones (@tonescodedesign) on CodePen.

.item-list {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 30px); 
  overflow: hidden;　/* 3つ目のmargin-right分は隠す */
}

.item {
  width: calc(33.3333% - 30px); /* margin-right分を引きます */
  height: 260px;
  margin: 0 30px 30px 0;　/* 余白 */
  background: #ddd;
}

使用時の注意点

演算子の前後にはスペースが必要

calc() を使用する際、演算子（+, -, *, /）の前後にはスペースを入れる必要があります。

.correct {
  padding: calc(50% - 20px); /* 正しい記述 */
}

.incorrect {
  padding: calc(50%-20px); /* 誤った記述（エラーになる） */
}

calc() は transition でアニメーションできる

calc() は transition や animation にも対応しており、動的なレイアウト調整が可能です。

.box {
  width: calc(50% - 20px);
  transition: width 0.3s ease-in-out;
}

.box:hover {
  width: calc(60% - 20px);
}

ホバー時に幅がスムーズに変化します。

calc() でアクセシビリティを考慮する

さいごに

calc() を活用することで、レスポンシブかつ柔軟なレイアウトを実現できます。