コーディング

calc()を使ってCSSのサイズ指定を計算して出力する

2017.09.20

calc()を使ってCSSのサイズ指定を計算して出力するのアイキャッチ画像

みなさんはCSSのサイズ指定をする時に、細かい計算をしてサイズ指定をしていますか?
calc()は計算式を記述すればブラウザ側で計算して出力します。

しかもcalc()はIEを含むほとんどのメジャーブラウザに対応しているので、安心して使用できます。
また、計算は単位を揃える必要がなく、異なる単位間でも計算してくれるのでレスポンシブコーディングともとても相性がいいです。

それでは具体例を交えながら活用方法を紹介します。

calc()は加算、減算、乗算、除算を行うことができます

calc()は下記のように四則演算を行うことが可能です。

//加算
.hoge{
	width:calc(10px + 50px);
}
//減算
.hoge{
	width:calc(100px - 50px);
}
//乗算
.hoge{
	width:calc(100px * 50px);
}
//除算
.hoge{
	width:calc(100px / 50px);
}

さらにこの四則演算は異なる単位でも行うことが可能なので下記のような記述を行うことができます。

//加算
.hoge{
	width:calc(25% + 10px);
}
//減算
.hoge{
	width:calc(100% - 300px);
}
//乗算
.hoge{
	width:calc(10vw * 5);
}
//除算
.hoge{
	width:calc(100% / 7);
}

そしてこの四則演算を組み合わせた入れ子にも対応しています。

//四則演算の入れ子
.hoge{
	width:calc(100%/calc(calc(10 - 5)*2));
}

具体的な使用例

アマゾン風ナビゲーション

アマゾンのようにナビゲーションに固定幅を確保し、残りの部分をブラウザ幅に合わせて可変するようなボックスをサイズ指定する場合

//横幅300pxのナビゲーションを固定
.hoge{
	float:right;
	width:calc(100% - 300px);
}

ブラウザ幅に関係なく天地左右中央表示

これまでもマイナスマージンを使用すれば可能でしたが、calc()を使用すればマイナスマージンを使用せずに設定ができます。

//1辺300pxのボックスを天地左右を中央表示
.hoge{
	position:absolute;
	top:calc(50% - calc(300px / 2));
	left:calc(50% - calc(300px / 2));
}

マージン固定でのリキッドレイアウト

ボックス間のマージンは固定しつつ、ブラウザ幅に合わせてボックスを可変させる

//マージン20pxに設定して3つのブロックをブラウザ幅に合わせて均等に3等分の幅に設定する
.hoge{
	float:left;
	margin-left:20px;
	width:calc(calc(100% - calc(20px * 4)) / 3);
}

参考にしてみてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。