CSS calc() プレイグラウンド
calc() 式をリアルタイムにプレビュー。コンテナ幅スライダーで単位混在の便利さを体感しよう。
calc()
プリセット
パディング考慮の全幅
親要素の全幅から左右10pxずつのパディングを引いた幅。ボックスモデルの基本パターン。
calc(100% - 20px)
calc(100% - 20px)=—
CSS 出力
.element {
width: calc(100% - 20px);
}使い方
- プリセットボタンを選ぶか、calc() の中に式を直接入力してください
- 「コンテナ幅」スライダーを動かすと、親要素の幅が変わり calc() の計算結果がリアルタイムで更新されます
- 計算後の実ピクセル値が「= ○○px」として表示されます
- CSS 出力エリアの「コピー」ボタンでコードをクリップボードに取得できます
「100% - 60px」を実現する唯一の方法
「サイドバーが240px固定で、メインコンテンツは残り全部」というレイアウトを作りたいとき、
メインの幅を width: 100% - 240px と書きたくなる。でもCSSでは異なる単位の引き算はできない。
calc() を使えば width: calc(100% - 240px) と書ける。
%とpxを混ぜた計算ができるのは calc() だけ。レスポンシブデザインで「固定幅 + 可変幅」の組み合わせが必要な場面で必須になる。
よく使うパターン
- 固定ヘッダーの下にコンテンツを配置 —
height: calc(100vh - 60px)でヘッダー分を引いた高さを確保。スクロール領域がぴったり収まる。 - 余白を考慮したカード幅 —
width: calc(33.333% - 16px)で3カラムレイアウト。gap分を引くことで均等に並ぶ。 - 中央寄せの微調整 —
left: calc(50% - 150px)で幅300pxの要素を中央に配置。transform を使わない方法。 - CSS変数との組み合わせ —
calc(var(--sidebar-width) + var(--gap))で変数を使った柔軟な計算。値を1箇所変えれば全体に反映される。
よくある質問
- Q. calc() の中でスペースは必要？
+と-の前後にはスペースが必須。calc(100%-60px)はエラーになる。calc(100% - 60px)が正しい。*と/はスペースなしでも動くけど、読みやすさのために入れるのがおすすめ。- Q. calc() の中に calc() をネストできる？
- できる。
calc(calc(100% - 40px) / 3)のように書ける。ただし内側の calc() は省略しても同じ結果になるので、calc((100% - 40px) / 3)と括弧だけで書く方がシンプル。 - Q. Flexbox や Grid があれば calc() は不要？
- レイアウトの多くは Flexbox/Grid で解決できるけど、「100vh - ヘッダー高さ」のような計算は calc() でしかできない。併用するのが現実的。