【CSS】widthの数値を自動で計算させる方法

「width」の数値を自動で計算させる方法は、CSSの「calc()」関数を使用することで実現できます。「calc()」関数を使用すると、数式を記述して計算することができます。

例えば、親要素の幅からマージンを引いた幅にする場合には以下のように記述します。

.child {
  width: calc(100% - 20px);
}

上記の例では、親要素の幅から20pxを引いた幅(100%-20px)にしています。

また「calc」関数は、複数の要素の幅の和や、複数の値の平均など複雑な計算も可能です。

.box {
  width: calc(50% + 30px);
  /*50%に30pxを足した幅*/
}

「calc」関数は、複雑な幅の計算を簡単に実現することができ、responsiveデザインをする上でも有効な手法です。