CSS calc()プレイグラウンド

リファレンス

CSS calc()とは？

calc()関数は、CSSプロパティの値を計算式で指定できます。異なる単位（px、%、rem、vwなど）を混合して演算できるため、レスポンシブレイアウトで非常に便利です。加算（+）、減算（-）、乗算（*）、除算（/）をサポートします。

使用可能な単位

px — ピクセル。固定値。% — 親要素に対する割合。rem — ルート要素のフォントサイズに対する倍率。em — 親要素のフォントサイズに対する倍率。vw / vh — ビューポートの幅/高さに対する割合。vmin / vmax — ビューポートの小さい方/大きい方に対する割合。

一般的な使用例

全幅からパディングを引く — width: calc(100% - 2rem)。流体タイポグラフィ — font-size: calc(1rem + 1vw)。センタリング — margin-left: calc(50% - 150px)。グリッドレイアウト — width: calc(33.333% - 20px)。

プライバシー

すべての生成処理はブラウザで100%実行されます。データはサーバーに送信されません。