cssでレイアウトをカスタマイズしている時、横幅を「100％から50pxだけ少ない値にしたい」というような時はありませんか？
そのような場合は、四則演算を使う「calc」というコードで実装できるので紹介します。
はじめに
今回紹介する方法は、cssを使ってwidthやheightなどの値に「計算式」を記述するcalcの使い方です。
足し算や引き算、掛け算割り算などの四則演算ができるのでぜひ実践して見てください。
具体例でいうと
というような時にも使えるかと思います。
広告などのコンテンツは横幅が決まっているものが多いため、calcでその分をマイナスすればレイアウトが崩れるのを避けられるかもしれません。
では実際に「calc」の使い方を見ていきましょう。
calcの使い方
cssでcalcを使った記述をする場合、以下のような構成になっています。
.クラス {
プロパティ: calc(値 + 値);
}
順に見ていきましょう。
クラスは、HTMLで設定した内容によって変わるので対応したものを設定してください。
プロパティは、widthやheight、color何かを指定するために用意するもので、変更したいスタイルによって変わってきますね。
重要なのは「clac( )」の部分です。
calcを使えばカッコ内に値を設定するだけで、簡単に計算できます。広告の例でいうと「calc( 100% - 300px)」のようになるかもしれません。
これがcalcの基本形です。
計算式
calcで使われる計算式の「+, -」はそのままキーボードで入力できますが、”かける”や”割る”はキーボードで入力できませんよね。
実はプログラミングでは、積は「*」、商は「/」で表されることになっています。これは決まりごとなので、そういうものなんだと覚えれば良いです。
先ほどの式に当てはめると以下のようになります。
width: calc(100% * 3);
これで、横幅は「100％の3倍」になりました。
とはいっても、これは結局「width: 300%」なんですけどね。
ちなみに、計算式の値は2つ以上を設定することもできます。
width: calc(100% * 3 / 3); みたいな感じにすれば、widthの値は100％になりました。
状況に合わせて使いこなしてみてください。
まとめ
今回紹介したように、calcを使えばcssで四則演算を行うことができました。
計算でスタイルの値を設定できると、サイズの変わらない要素と隣り合わせで設置するときなんかで使えるかと思います。
ぜひ使いこなして見てください。
ではまた。
