CSSのwidthプロパティは、要素の幅を指定できます。
widthプロパティについては、下の記事で詳しく解説しています。

今回は、widthプロパティの少し特殊な使い方について、解説していきます。
widthプロパティの特殊な使い方とは
要素の幅を画面の横幅いっぱいにしたい場合、下のようなCSSでwidthプロパティの値を指定するでしょう。
.sample
{
width: 100%;
}
ただ、要素自体は画面の横幅いっぱいでも、内側のコンテンツについては、少し余白を持たせたかったため、下のようにしました。
.sample
{
width: 100%;
padding: 0 10px;
}
paddingプロパティで左右の余白を10pxにしています。
ただ、このままだとpaddingプロパティの余白の分だけ、左右にはみだしてしまうんです。
widthプロパティと余白の関係については、下のリンクを参照してください。

画面の横幅いっぱい(widthの値、つまり100%)から、paddingプロパティの余白の分を引かなければ、画面の横幅いっぱいにおさまらないのです。
具体的な数値であれば、計算してwidthの値を算出できますが、100%となっていて、具体的な数値がわかりません。
こんな時に登場するのが、calc()関数なのです。
calc()関数の使い方
calc()関数は、widthプロパティの値を計算して算出する時に使います。

先ほどの例だと下のような感じになります。
.sample
{
width: calc(100% - 20px);
padding: 0 10px;
}
paddingプロパティの左右の余白20pxを画面の横幅いっぱい、つまり100%から引いたものが、ここでのwidthプロパティの値となるのです。
calc()関数は、四則計算ができます。
+(足し算)や-(引き算)だけでなく、*(掛け算)や/(割り算)も使うことができます。
+(足し算)や-(引き算)をする時は、記号の前後に半角スペースを入れなければなりません。
注意してください。
*(掛け算)や/(割り算)をする時は、記号の前後に半角スペースは必要ありませんが、紛らわしいので、半角スペースを入れる癖をつけるとよいでしょう。
思わぬミスにつながることになりかねませんからね。
calc()関数を使いこなすことで、さらに一歩進んだレイアウト調整ができるようになります。
widthプロパティのクセを掴んでおくことで、こういった引き出しを増やし、いざと言う時に使えるようにしましょう。
widthプロパティのクセについては、関連する記事がありますので、ぜひ読んでみてください。
