• HOME > 
  • CSS > 
  • CSSのcalcの使い方【CSS内で計算を行う方法を解説】

CSSのcalcの使い方【CSS内で計算を行う方法を解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

calcとは?

CSS内で計算を行い、その計算から導き出された計算結果をプロパティの値に使用する指定の方法のことです。

従来はプロパティには固定の値やパーセントしか使用できませんでしたが、calcが使えるようになったことでブラウザのウインドウサイズなどに応じて変動的に値を指定することが可能になりました。

現在ではWEBサイトは様々なウインドウサイズのデバイスで見られることを想定したレスポンシブデザインで制作することが当たり前になっています。

レスポンシブイメージ

calcを用いれば、ウィンドウサイズ(ビューポート)や親要素のサイズの変化に応じて計算して出した値を指定できるので、どのようなウインドウサイズにも柔軟に対応したレイアウトを作りやすくなります。

calcの使い方

それでは、具体的にCSS内でどのように記述してcalcを使用するのか、どのような場面で活用できるのかを説明していきます。

記述の仕方

CSSのプロパティの値の部分にcalc()関数を用いた計算式を記述して指定します。

calcという文字に続けて「()」カッコを書き、その中に計算式を記述していきます。

calcの使い方

例えば均等に3分割した幅を指定したい場合、calcを使用すれば次のように記述できます。

演算子の前後には半角スペースを入れます。

CSS

.box{
    width:calc(100% / 3);
}

従来は親要素に応じてパーセントで分割したい際に、割り切れない場合は33.33%というように記述していましたが、calcを用いればcalc(100% / 3)というように書くことができます。

使用できる演算子

calcの計算では、四則演算(足し算、引き算、掛け算、割り算)を行うことができます。

「+」プラスと「-」マイナスはそのままですが、掛け算の演算子は「*」(アスタリスク)、割り算の演算子は「/」(スラッシュ)を使用します。

calcを使う時の注意点

演算子の両側には半角スペースを入れる

calcの計算式では、演算子の前後に半角スペースを入れることがルールになっています。

もしcalcがうまく機能していない場合は、演算子の前後に半角スペースがあるか確認してください。

calcの使い方

値が数値の時に使用可能

当然ながらプロパティ自体が数値で指定できない場合は、calcを使用することはできません。

widthやheight、paddingとmargin、font-sizeなど値が数値の時に限りcalcも使用可能です。

計算の順番に注意

通常の計算式と同様に複数の演算子を用いた計算の場合は優先度順に計算が行われるので注意が必要です。

例えば、3分割しようとして「100% - 30px / 3」という式を作っても、この場合は「30px / 3」の方が先に計算されますので、最終的な値は「100% - 10px」になります。

CSS

.sample{
    width:calc(100% - 30px / 3);
}

プレビュー

calc10030px3の場合

calcでできること

単位が異なっていても計算可能

プロパティの値では「px」や「%」、「vw」など数種類の単位が使用できますが、calcではそれらの異なる単位同士でも計算を行うことが可能です。

つまり、「%」という相対的な値から「px」という固定の値だけ差し引くといった指定をすることができます。

CSS

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

入れ子にすることも可能

先程計算の優先順位について触れましたが、通常の計算式と同じように「()」カッコを使って計算の順番を指定することも出来ます。

前述の例であれば下記のように記述すれば、「100%-30px」が先に計算された後「/3」が計算されます。

CSS

.sample{
    width:calc((100% - 30px) / 3);
}

プレビュー

calc入れ子の場合

ビューポートを使って計算する

CSSでは「vw」や「vh」という単位を使うことでウインドウサイズとの比率でサイズを指定することができます。

calcの計算式でもこの単位を使用できるので、ウインドウサイズに応じた指定を行いたい場合には便利です。

リンク先のサムネイル
CSSのvhやvwの使い方

「vh」と「vw」は、pxや%と同様にwidthやheightなどのCSSのプロパティの値を指定する際に使用できる単位です。vhやvwを使うとウインドウサイズ(ブラウザの表示領域)に応じたサイズ指定が可能になり、レスポンシブデザインが作りやすくなります。  ...【もっと読む】

CSS

.sample{
    width:calc(100vh / 5);
}

プレビュー

ビューポートの場合

calcを使ってフォントサイズを指定する

calcを使用すれば、ウインドウサイズに応じて文字の大きさ(フォントサイズ)を変更することも可能です。

font-sizeプロパティの値をcalcを使って指定します。

下記の例をウインドウサイズを変更して確認してみて下さい。ウインドウサイズが小さくなると文字サイズも小さくなっていきます。

CSS

.sample{
    font-size: calc(100vw / 30);
}

プレビュー

ウインドウサイズに合わせて文字サイズが変わります。

まとめ

プロパティの値に計算結果を使うと聞くとJavascriptを使わなくてはできないかと思ってしまいますが、calcを使えばCSS内だけで完結させることができるのでとても便利です。ウインドウサイズに応じたレスポンシブデザインが作りやすくなります。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。