CSS calc関数の使い方を勉強してみた

CSS calc関数の使い方を勉強してみた

calcはcalculationの略で「計算」や「演算」といった意味です。

CSSのcalc関数の使い方はcalculationの言葉の意味と同じく、式で計算した結果をプロパティの値で使用することができるCSS関数です。

 

calc-box{
    width: calc(100% - 300px);
}

 

CSSでwidthプロパティの値を100%にすることがあるかと思いますが、CSSのclac関数をプロパティの値に使用すると、widthで要素の幅を指定するときなどに、あらかじめ100%幅から300pxを引く計算式を値に使用する使い方ができるようになります。

 

calc関数が使用できる場所は「長さ、周波数、角度、時間、数値、整数」の型の値が許容される場所であればどこでも使用できます。

 

なんとなく理解していたつもりのCSSのcalc関数ですが、基本的な使い方をあまり理解できていないことに気づき、改めてcalc関数の使い方を基本から勉強してみることにしました。しかも誰かに説明しているかのように。

勉強中なのでポンコツな内容があったらすいません。

 

CSSのcalc関数の使い方を大まかに把握

 

まずは大まかにcalc関数の使い方を把握していき、その中で分かりづらく思えたCSSのcalc関数の使い方を中心に理解を深めていきたいです。

記事の冒頭にも書きましたがCSSのcalcとはCSSプロパティの値に計算式を用いて、式の結果を値として使うことができるCSS関数です。

calc関数の使い方で計算式を値として使用するときは、プロパティの値にcalc()を記述したカッコの中で計算する式を組み立てます。

 

calc-box{
    width: calc( 計算式 );
}

 

 

上の画像はCSSでwidthプロパティの値に100%の幅を指定した赤色のボックスと、calc関数でcalc(100% – 300px)の計算式を組み立てて指定した水色のボックスです。

 

width: 100%;/*赤色ボックスに指定した値*/
width: calc(100% - 300px);/*水色ボックスに指定した値*/

 

width:100%を指定した赤色のボックスは親要素の幅いっぱいに広がります。

一方のcalc関数でcalc(100% – 300px)を指定した水色のボックスは親要素の幅いっぱいに広がりません。これはCSSのcalc関数のカッコ内で計算した(100% – 300px)の計算式の結果がwidthの値になって幅のサイズを適用しているからです。

水色のボックスが親要素の幅いっぱいに広がらないのは、calc関数の計算式に記述した(100% – 300px)の計算で、要素の幅100%から300px分を引いた値をwidthプロパティの値としてボックスに適用する使い方をしているためです。

このときcalc関数で使う計算には四則演算子を用いて計算式を組み立てます。

 

Advertisement

 

calc関数で使う四則演算子の使い方

 

CSSでcalc関数の使い方を勉強するときに理解を深めておきたいのは「calc関数で使う四則演算子の使い方」です。

CSSのcalc関数のカッコの中で使用する計算は四則演算を用いて値の結果を計算する使い方をします。

 

四則演算とは学校で習った「足し算」「引き算」「かけ算」「割り算」のことを言います。

 

CSSのwidthプロパティの値に記述したcalc関数の計算式を改めて眺めながら勉強

 

width: calc(100% - 300px);

 

calcのカッコ内で100%と300pxの間に半角スペースを空けて半角のマイナス記号が記述してあります。この「-」の記述が四則演算の引き算をしてる「四則演算子」の一つです。算術演算子とも言うようです。

例では四則演算子のうち「-」を使用していますので、100%から300pxを引き算した結果を値として要素に適用することができるのがcalc関数のカッコ内に記述する四則演算の使い方です。

使用できる四則演算子はマイナス記号だけではありません。

 

  • 加算「+」
  • 減算「-」
  • 除算「/」
  • 乗算「*」

 

CSSのcalc関数でプロパティ値の計算をするために「+」、「-」、「/」、「*」の演算子が使用可能です。この4つの演算子はcalc()のかっこ内で計算式に使用するときに書き方の規則があるのです。

 

calc()のかっこ内で計算式の書き方

 

CSSのcalc関数でかっこ内に記述する計算式の書き方で勉強しておきたいことは、「演算子の書き方」と「計算式に使用するオペランドの書き方」です。まずは演算子の前後の部分の書き方を見てください。

 

/*加算*/
width: calc( 50% + 30px );

/*減算*/
width: calc( 800px - 5em );

/*除算*/
width: calc( 100% / 3 );
width: calc( 100%/3 );

/*乗算*/
width: calc( 2.5em * 6 );
width: calc( 2.5em*6 );

 

加算の「+」と減算の「-」の書き方は、演算子の前後に空白文字を使用しています。

除算の「/」と乗算の「*」の書き方は、演算子の前後が空白文字なし、空白文字あり両方の書き方をしています。

細かい違いですがcalc()のかっこ内で計算式に使用する演算子で「+」と「-」は、前後に空白文字を記述して計算式に使用します。

除算の「/」と乗算の「*」を使用する場合には、前後に空白文字を使用して書いても、使用しないで書いてもオッケーです。コードの見やすさを考えると、空白文字を用いて書く使い方に統一したのが良いと勉強してみて気づくことができました。後に調べたら推奨されてるようですね。

 

Advertisement

 

次にcalc()のかっこ内で計算式に使うオペランドの書き方です。オペランドは式を構成する演算子の両側部分のことです。

 

calc()のかっこ内で乗算を使用する場合のオペランドの書き方

 

width: calc(20% * 2);
width: calc(2 * 20px);

 

オペランドの1つは <number> を使用します。これは演算子両側の値のうち、どちらか一方が <number> であるかがチェックされるためです。

<number>というのは整数または小数部分のある数値を表します。

 

calc()のかっこ内で除算を使用する場合のオペランドの書き方

 

width: calc(100% / 3);

 

右側は <number> を使用します。演算子の右側が <number>を使用しているかチェックされるためです。

 

calc()のかっこ内で加算、減算を使用する場合のオペランドの書き方

 

width: calc(100% + 10px);
width: calc(800px - 5em);

 

加算(+)と減算(-)は、両方の数値が「<length>長さ」である必要があります。演算子の両側の値が同じ型であるかがチェックされるためです。

 

Advertisement

 

<number>とか<length>とか出てきましたがのことです。つまりcalc()のかっこ内で計算式の書き方は、型の規則を間違えてしまうとcalcで指定した計算式の結果が適用されないとかになってしまうことになります。

たとえばwidth: calc(100px + 10s) だと「長さ」 と 「時間」 の異なる型を指定しているのでcalc()のかっこ内での計算式の書き方は間違えていることになります。

型についてはcalc関数の使い方を勉強していて難しく感じたのでMDNを参考に勉強しました。CSSでcalc関数が使えるプロパティを知る勉強にもなったので時間があるときにでも以下の型名にリンク貼っておくので読んでみてください。

 

<length>(長さ)
長さの値を表します。主なCSSのプロパティは width、height、 margin、 padding、 font-size、 などです。

 

<frequency>(周波数)
話し声の高さなどの周波数の値を表します。CSSのプロパティでは現時点(2021.5.11)使われていません。

 

<angle>(角度)
度、グラード、ラジアン、回転の値で表される角度の値を表します。CSSではgradient関数やtransform関数などで使われています。

 

<time>(時間)
時間の値を秒単位またはミリ秒単位で表現します。CSSでは animation や transition などのプロパティで使用されています。

 

<percentage>(%)
パーセント値による割合を表します。CSSなら width、 height、margin、padding、 font-size などのプロパティで使われます。

 

<integer>(整数)
number の特殊型です。正と負の整数を表現します。

 

calc関数の使い方を応用できるか記述してみる

 

ちょっと記事が長くなってしまったのですが、勉強したcalc関数の使い方を応用できるか記述してみることに。

 

main{
    width: 100%;
    height: auto;
    background-color: darkkhaki;
    padding: 20px;
}
aside{
    width: 280px;
    height: auto;
    background-color: darkseagreen;
    padding: 20px;
}

 

 

たとえばCSSのflexboxで左メインと右サイドを横並びにして、サイドを280pxの固定幅に、メインを100%幅にすると上の画像のようになります。

このとき左メインの要素のwidthプロパティ値にCSSのcalc関数を使用します。

 

main{
    width: calc(100% - 300px);
    height: auto;
    background-color: darkkhaki;
    padding: 20px;
}

 

calc関数の計算式は減算する演算子を使用して、幅100%から300pxを引いた式の結果を値に適用。

 

 

するとマージンを使用しなくてもメインとサイドの要素間に余白を作ることができます。ドヤ顔で書いたけど、後から調べたらcalc関数の応用テクニックとしては当然のことのようでした(笑)。知ってる方には今さら感が満載かもしれません。

他にもいくつかCSSでcalcの使い方を応用しようと試みたのですが、応用と言えるのか疑問になったのでCSSだけ載せておきます。

親要素ul内のli子要素3つを横並びにした幅をcalcで三分割してみたcalc関数の記述部分です。

 

width: calc(100% / 3);
transition: all calc(0.1s * 20) ease-in-out;

 

flexboxを使用することが多いので、「これイイよっ!」みたいなテンションになれず、応用できたのか分からずです。でも分割できているのでスライドする画像なんかに使ったりできるはずです。

そして三分割したli要素にtransitionを使って変化する速度にcalcの計算式を使ってみました。使ってみただけでした。

使ってみただけのCSSで良いならlinear-gradient関数のカラーストップにもcalcは使えます。

 

background: linear-gradient(45deg, white calc(25% - 15px), #6cb7d9 calc(25% + 15px), #5a72f6 calc(75% - 15px), white calc(75% + 15px));

 

CSSでcalc関数の使い方を応用するのは経験不足なので、気長に増やしていきたいですが、calcの使い方を勉強したことで自分がどんなことをCSSでやっているのかを理解しながらコードが書けるようになったので、意味のある勉強になりました。

CSSカテゴリの最新記事