【CSS】widthプロパティの値を便利なcalc関数で計算

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()関数は、widthプロパティの値を計算して算出する時に使います。

先ほどの例だと下のような感じになります。

.sample
{
    width: calc(100% - 20px);
    padding: 0 10px;
}

paddingプロパティの左右の余白20pxを画面の横幅いっぱい、つまり100%から引いたものが、ここでのwidthプロパティの値となるのです。

calc()関数は、四則計算ができます。

+（足し算）や-（引き算）だけでなく、*（掛け算）や/（割り算）も使うことができます。

+（足し算）や-（引き算）をする時は、記号の前後に半角スペースを入れなければなりません。

注意してください。

*（掛け算）や/（割り算）をする時は、記号の前後に半角スペースは必要ありませんが、紛らわしいので、半角スペースを入れる癖をつけるとよいでしょう。

思わぬミスにつながることになりかねませんからね。

calc()関数を使いこなすことで、さらに一歩進んだレイアウト調整ができるようになります。

widthプロパティのクセを掴んでおくことで、こういった引き出しを増やし、いざと言う時に使えるようにしましょう。

widthプロパティのクセについては、関連する記事がありますので、ぜひ読んでみてください。