こんにちは、ナガタです。
今日は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です。一応実装時には、ブラウザ対応確認してみてくださいね!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事