もうwidthに悩まされない スタイルシートで計算式を使って楽しよう

WordPress, HTML/CSS, ウェブサイト作成

CSSをいじってレイアウトを調整していると悩みがちなwidthの扱い。あっち(PC表示)を立てればこっち(スマホ表示)が立たずで、試行錯誤で調整することもままあります。

しかしCSSで計算式を使えばwidthに悩まされることは激減するはず。

CSSの変数とは違ってIE11もサポートしているため、普通に使えます。

CSSの計算式の使い方

使い方は簡単。

witdh: calc(98%/2);
witdh: calc(100% – 150px);

のように、calc()の()内で計算式を書くだけで加減乗除 “+-*/” ができます。

ただ、+-は注意が必要で、width(100% – 10%)ならいいけど width(100%-10%)だと動かないということがあります。スペースが必要みたい。

widthばかりでなく、margin、padding、font-size、border、box-shadowなど、日ごろ使うもの一通りに使えます。

calcの特徴は別の単位を使っても計算してくれるということ。%、px、em、rem、vw、vhなど、

100%から150px引いたり、50%にマージンとボーダーの21px分足す、といったことができます。

横並びに配置したい時はもとより、vwを使ってのbox-shadowの陰の大きさまで調整することができます。便利すぎです。