「CSS」で幅を指定する際には、「width」というプロパティを採用される事が多いと思います。その「width」プロパティなどの「値」に利用できる便利な方法に、「calc」というものがあります。
「calc」を採用する事で「CSS」の表現の幅が広がり、より理想のWebページを作成できるようになりますので、ぜひ活用していきましょう。
calcとは？
「calc」とは、日本語で「計算」という意味です。
意味が頭に入ると、すっと覚えられるようになりますね。
calcでできる事
「calc」の最大の特徴は「計算式が利用できる事」になります。
計算式が利用できることにより、固定的な値ではなく、状況に応じた数値で自動的に表示させる事ができます。
例
例えば、最大幅1000pxの状態で、100％から50px引いた数字を保ちたい場合
ええ？950pxでよくない？
ポイント
初心者の方にとっては、この辺が理解に苦しむ事がありますよね。
確かに、結果的には950pxを表示するので同じ事なのですが、以下でも説明しますが、絶対的な数字の指定をする事で不都合が出る時が、制作作業上出てくるようになります。
そういった時に、表現の引き出しが多くあるととても役立つようになります。
100％から50px引いた数字を保ちたい場合
widthに指定する「値」として、「width:100%-50px;」とはできませんので、「width:950px;」としなければなりません。
様々なデバイス（タブレット、スマホ）に加え、バージョン違いのいろいろなサイズがある中で、ジャストのサイズ指定をする事はハンドリングの良い状態とは言えません。
「CSS」ではこれといった表現は決まっておりませんので、他にも方法はありますが、calcでは
.sample{
width: calc(100% - 50px);
}
と、とてもシンプルに記述できるので便利になります。
「calc」のポイント
スマホやレスポンシブ仕様に柔軟に対応できる相対的動的な表現が可能になります。
calcの使い方
「calc」の「CSS」は以下のような形で表現します。
「calc」の記述方法
プロパティ: calc(式)
例）.sample{width: calc(100% + 50px);}
calcで使える計算式
「calc」では以下の計算式の利用が可能です。
「calc」で使える計算式
「 + 」加算（足し算）
例）.sample{width: calc(100% + 50px);}
「 - 」減算（引き算）
例）.sample{width: calc(100% - 50px);}
「 * 」乗算（かけ算）
例）.sample{width: calc(100% * 50px);}
「 / 」除算（割り算）
例）.sample{width: calc(100% / 50px);}
が仕様可能です。
calcのメリット
「calc」では他にも、計算式を使えるが故のメリットがあります。
幅を等分して表示する
例えば100％の幅を3等分したい時、「width:33.33％」とする場合があります。ずっと3は続きますが、影響なさそうな少数第二位で切ってます。
しかし「calc」の場合ですと「width: calc(100% / 3)という表現が可能になります。
「width:33.33％」に比べて結果的に何が違うかというと、表示結果としては何も変わらないと言っても過言ではありません。
しかし、情報の整理というのは大事だと思います。「calc」を使うことにより、直感的で見やすいコードを書く事が可能になります。
まとめ
いかがでしたでしょうか？？
「CSS」で幅を指定する際に、計算式を利用できる「calc」の紹介をしてまいりました。
「calc」を利用する事で、動的でレスポンシブ仕様に適した柔軟なコードを対応させる事ができます。
「calc」で扱える計算式は、一般的に利用している四則演算（足し算（+）、引き算（-）など）を中心に扱う事ができます。
また、割り切れない等分幅を表現したい場合にも活用できますので、大変便利だと感じます。
ぜひ、活用していきましょう。
