今年もCSSには大変お世話になりました。なかでも今年になってとくにお世話になる頻度が増えたのが「calc(キャルク)()関数」。プロパティの値に、計算式を使わせてくれるスゴいやつです。ここでは、そんなcalc()関数を使った便利ワザについて書いてゆきます。 この記事は「今年お世話になったCSS Advent Calendar 2016」の23日めの記事です:)。 ※2023年の11月に加筆・修正しています。 calc()関数を使った便利なスタイル 例えば下図みたいな、「サイト全体のコンテンツは横幅800pxで画面中央にレイアウトされていて、その中のあるセクションだけウィンドウ全幅まで広がってる」なんてデザインの場合。以前は、「サイト全体を包括するコンテナには横幅を指定しないで、セクションごとに横幅を指定」していたと思うんです。 HTMLとCSSは以下みたいな感じ。 main要素には何もスタ
![コンテナからの解放。](https://cdn-ak-scissors.b.st-hatena.com/image/square/d6f4c4455bccc51ddd931af3dd1e44f4ae703c1f/height=288;version=1;width=512/https%3A%2F%2Flopan.jp%2Fbreaking-out%2Fogp.png)