calc( ) 関数

メインコンテンツ

この例では：
.sidebar が固定の 250px
.main は calc(100% - 250px) で残りのスペースをピッタリ使ってます。

calc() を使って、残りの幅を自動計算しています！

.main {
      width: calc(100% - 250px);

事例

✅ よく使われる例：

1. 固定幅と割合を混ぜたいとき：
css

   .main-content {
     width: calc(100% - 250px);          /* サイドバーが250pxなら、残りをメインに */
   }

2. 文字サイズの調整：
css

   font-size: calc(1em + 2vw);          /* デバイス幅に応じて拡大縮小 */

3. 中央寄せ（左右の余白を自動計算）：
css

   margin-left: calc((100% - 800px) / 2);


✅ 使用上の注意：

演算子（+、-、*、/）の前後には必ず半角スペースが必要です。

css

/* 正しい */
width: calc(100% - 20px);

/* 間違い（スペースがない） */
width: calc(100%-20px); /* 動作しないことがある */