問題
cssで、幅、高さを計算式で設定したい。
解決策
calcを使用する。
cssで値を計算式で設定するには?
cssで値を計算式で設定できる「calc」を使うことで、より柔軟なレイアウト設計ができるようになります。今回は幅、高さを計算式で設定できる「calc」の使用例をご紹介します。
DEMOはこちら
アイテム
アイテム
「calc」を使用する
cssで「calc( 計算式 )」を設定することで、幅、高さを計算式で設定することができます。
HTML
<div class="calc-box clearfix">
<p class="boxl">アイテム</p>
<p class="boxr">アイテム</p>
</div>
CSS
.calc-box .boxl{
float: left;
width: calc( 50% - 10px );
background-color: #FCECE8;
}
.calc-box .boxr{
float: right;
width: calc( 50% - 10px );
background-color: #FCECE8;
}
ここに注意!
calcの括弧内で記述する演算子(+、-、*、/)の前後には、必ず半角スペースを入れてください。でないと適用されなくなってしまうので、注意が必要です。
コメント