CSSのレスポンシブに便利なcalcの使い方

CSSのcalcの使い方を少し勉強したので、シェアします。

親要素の中に子要素としてコンテンツとサイドバーが横並びしていて、サイドバーの横幅は固定にして、コンテンツの横幅のみ画面幅に応じてレスポンシブ・可変にするcalcの使い方です。

calcの使い方

サイドバーの横幅を200pxとします。そしてコンテンツの部分は可変にします。

そのためには、calcでサイドバーの横幅200pxを引けばokです。

コンテンツの幅を90％とします。

書き方は、width: calc ( 90% – 200px );

とすればokです。

画面幅を狭めると、右のサイドバーは横幅が固定のままで、左のコンテンツ部分は画面幅に合わせて幅が狭くなっているのが分かります。

簡単な説明でしたが、感覚でわかったと思います。簡単にレスポンシブにできて便利なので、覚えておいて損はなさそうですね。