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、なんかにも使用できます。

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

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。