問題 × 解決策

cssで幅、高さを計算式で設定できる「calc」

問題

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の括弧内で記述する演算子(+、-、*、/)の前後には、必ず半角スペースを入れてください。でないと適用されなくなってしまうので、注意が必要です。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

13 − ten =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧