チェックフィールド株式会社

東京 港区 千代田区 中央区 ITの運用管理やコンサルティング・相談・サポートはにお任せください

スタッフぶろぐ

このエントリをはてなブックマークに登録

FCSSのcalc関数

タグにインラインでCSSを記述することに
背徳感なんか持つもんか!アライグマです。

CSSのcalc関数を使うと、
要素のスタイル指定する際に計算式を使うことが可能になります。

例えば、親要素の幅の80%のボックスにしたい場合は次のように記述します。

表示

親要素の80%幅の私です。

 

これを親要素の幅の80%よりも100px短いボックスにしたい場合は次のように記述します。

表示

親要素の幅の80%よりも100px短い私です。

 

上の青いボックスよりも100px短い幅になりました。
引き算以外にも足し算など四則計算ができるので工夫次第で表現が広がります。
注意点として「80%-100px」のように計算式の間にスペースを入れないと動作しません。
また、css calc関数に対応していないブラウザもありますのでご注意ください。