CSS3のcalc()を使って簡単に%も含めた余白計算

こんにちは、ナガタです。
今日はCSSのcalcについて軽く。

%と数字をごっちゃ混ぜで数値設定できる

<img src="sample.jpg" alt style="width:50%; margin-right: 2rem; float: left;”>
<p>さんぷるさんぷるながーい…さんぷる</p>

こんな風に画像を配置し、文章も追加するとします。
すると、文章は画像を回りこんで、画像の下にまで来てしまいますね。

でもそうさせないためにpタグにも余白を付けたいと思います。左に。

p{
     margin-left: 50% + 2rem;
}

これじゃダメです。

p{
     margin-left: calc(50% + 2rem);
}

これでOKですね!
rotateや、rgba、なんかにも使用できます。

参考:demosthenes.info – Layout Math with CSS: Understanding calc

まとめ

数値にパーセンテージをつかったときは、凄く助かります。レスポンシブデザインには欠かせないファンクションではないでしょうか?
なお、calc()はIE9よりサポートしてるCSS3です。一応実装時には、ブラウザ対応確認してみてくださいね!

フォローして続編をチェック

@universionsをフォロー