計算式で値を指定する方法

2017/06/22

「100%から4pxを引いた数を設定したい」など、計算式を値に設定したい場合は、calc関数を利用します。

サンプルコード

calc()の括弧内に計算式を指定します。演算記号の左右には半角スペースを入れる必要があります。

div {
	width: calc( 100% - 50px ) ;
}

デモ

%とpxの組み合わせ

「100%から50pxを引いた数値」をwidthプロパティに指定する例です。このように具体的に指定できない値を算出できるのが特徴です。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		div {
			width: calc( 100% - 50px ) ;
			background: peachpuff ;
		}
	</style>
</head>
<body>
	<div>100%から50px引いた分の横幅です。</div>
</body>
</html>

活用例

width: 100%の要素にmargin、padding、borderを加えると、幅をはみ出してしまいます。何故なら、要素の幅はwidth + padding + margin + borderの合計だからです。100%の横幅にmargin、padding、borderを加えたい場合にcalc関数が有用です。例えば下記は、左右のborder幅(25px * 2 = 50px)を100%から引いたことで、要素が画面幅にフィットしています。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		div {
			width: calc( 100% - 50px ) ;
			border: 25px solid #000 ;
		}
	</style>
</head>
<body>
	<div>100%から50px引いた分の横幅です。</div>
</body>
</html>

サンプルコード

デモ

%とpxの組み合わせ

活用例

関連記事