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

※当サイトではアフィリエイト広告を利用しています。

CSSヘッダー CSS

CSSのwidthプロパティは、要素の幅を指定できます。

widthプロパティについては、下の記事で詳しく解説しています。

【CSS】width、margin、paddingを一緒に使う時の注意点
要素の幅を指定するwidthプロパティ。使い方はとても簡単ではありますが、余白幅や線の太さを指定するプロパティと一緒に使う時は、注意が必要です。widthプロパティのクセを知っておけば、レイアウト調整がうまくいかない時に役立つはずです。

今回は、widthプロパティの少し特殊な使い方について、解説していきます。

widthプロパティの特殊な使い方とは

要素の幅を画面の横幅いっぱいにしたい場合、下のようなCSSでwidthプロパティの値を指定するでしょう。

.sample
{
    width: 100%;
}

ただ、要素自体は画面の横幅いっぱいでも、内側のコンテンツについては、少し余白を持たせたかったため、下のようにしました。

.sample
{
    width: 100%;
    padding: 0 10px;
}

paddingプロパティで左右の余白を10pxにしています。

ただ、このままだとpaddingプロパティの余白の分だけ、左右にはみだしてしまうんです。

widthプロパティと余白の関係については、下のリンクを参照してください。

【CSS】width、margin、paddingを一緒に使う時の注意点
要素の幅を指定するwidthプロパティ。使い方はとても簡単ではありますが、余白幅や線の太さを指定するプロパティと一緒に使う時は、注意が必要です。widthプロパティのクセを知っておけば、レイアウト調整がうまくいかない時に役立つはずです。

画面の横幅いっぱい(widthの値、つまり100%)から、paddingプロパティの余白の分を引かなければ、画面の横幅いっぱいにおさまらないのです。

具体的な数値であれば、計算してwidthの値を算出できますが、100%となっていて、具体的な数値がわかりません。

こんな時に登場するのが、calc()関数なのです。

calc()関数の使い方

calc()関数は、widthプロパティの値を計算して算出する時に使います。

calc関数とは

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

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

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

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

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

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

注意してください。

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

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

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

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

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

【CSS】width、margin、paddingを一緒に使う時の注意点
要素の幅を指定するwidthプロパティ。使い方はとても簡単ではありますが、余白幅や線の太さを指定するプロパティと一緒に使う時は、注意が必要です。widthプロパティのクセを知っておけば、レイアウト調整がうまくいかない時に役立つはずです。
タイトルとURLをコピーしました