備忘録的プログラミングリファレンス

calc() ファンクション

 calc() ファンクションは、計算によって値を取得する CSS のファンクションです。

 数値が使用できるのはもちろんですが、その他に CSS の長さに関する値、角度、時間、%、周波数が使用できます。

 以下は、calc() ファンクションによってエレメントの幅を調整する例です。

calc() ファンクション
<div class="example">
	<p>Example text.</p>
</div>

<style>
	div.example{
		width: calc( 100% - 30px );
		background-color: green;
	}
</style>
詳しくは「Example」を参照してください

 この例は、親エレメントの幅と同じ 100% から 30px 引いた値をエレメントの幅に指定しています。

 多くの場合は、エレメントの幅と高さを指定する widthheightmin-widthmax-widthmin-heightmax-height で使用されます。

ページ内 Index

構文(Syntax)

CSS

calc()

引数

 引数は四則計算式が利用できます。値は、数値の他に CSS の長さに関する値、角度、時間、%、周波数が使用できます。

Example

 以下は calc() ファンクションの例です。

親エレメントの幅から clac() で調整

 親エレメントの幅から 30px 引いた値をエレメントの幅に指定しています。