CSSで幅や高さで計算式を使用
スタイルシートCSSの備忘録

スタイルシートCSSで幅や高さで計算式を使用するときの方法です。

CSSで「calc」関数を使うと、プロパティの値に計算式を使うことができます。使用できる演算は、足す(+)、引く(-)、掛ける(*)、割る(/)の4種類になります。

使用例:幅100%から10pxを引いたサイズを指定したいとき

width: calc(100% - 10px);

注意点として「-」の前後には半角スペースが必要です。うっかりスペースを削除しないようにしてください。

1例としてwidthを上げましたが、他にも文字サイズなど色々と応用ができます。特にレスポンシブデザインにおいては、calc関数を使うことが多々あると思います。デザインの幅もひろがります。使い慣れると非常に便利なので、何かと使用することができます。

決算月・決算日一覧&検索で銘柄の決算月一覧を見ることができます。
簿記仕訳ドリル(初級・初歩)で簿記仕訳の(初級・初歩)を勉強できます。
CSSで幅や高さで計算式を使用について
(C)Diamondsystem