【CSS入門】calcを使って計算式で値を指定しよう

この記事ではCSSでcalcを使う方法について解説します!

calcを使うと、プロパティに渡す値に計算式を使うことが出来るようになります。

calcの使い方を知りたい。
calcを使う場面を知りたい。

といった方に向けてこの記事では、

  • calcの使い方
  • 画面のwidthやheightの指定に計算式うぃ使う方法
  • 文字サイズを画面の幅によって切り替える方法

について解説していきます。

レスポンシブデザインについて知りたい方も、ぜひご覧ください!

目次

calcとは

まずは「calc」とは何かについて知っておきましょう。calcは、プロパティの値に計算式を使うことが出来る関数です。

calcではそれぞれが違う単位でも計算をすることが出来ます。例えば画面幅100%から、100pxだけ引いた値をwidthにしたい場合も、

width: calc(100% - 100px);

というように指定することが出来ます。

これを使えば、それぞれの環境が変わるような場面でも、柔軟に、最適な表示をさせることが出来るようになります。

calcでwidthを設定する

それではcalcを使ってwidthを設定してみましょう。

こちらのコードをご覧ください。

<style>
    .box {
        margin: 0 auto;
        border: solid 1px #000;
        width: calc(100% - 100px);
    }
    .text {
        text-align: center;
    }
</style>
     
<body>
    <div class="box">
        <p class="text">あああああ</p>
    </div>
</body>

実行結果

こちらのコードではwidthにcalc(100% – 100px);を設定してページの横幅100%から100pxだけ引いています。

そのままでは左に寄った状態になってしまうので、margin: 0 autoを設定して、中央に寄せました。ここでは分かりやすいようにborderで枠を設定しています。

このコードを実際に実行してブラウザで見てみましょう。

ブラウザのウィンドウの横幅を変えてみても、その時の横幅100%から常に100pxが引かれた状態でborder(width)が見えているかと思います。

calcで文字の大きさを設定する

calcの使い方が分かったところで、次は文字の大きさを画面幅に合わせて変えてみましょう!

ビューポートとは

レスポンシブデザインで大事になってくるのがビューポートという概念です。

ビューポートというのはブラウザで表示される領域のことで、PCとスマホでは大きく変わってきます。

PC向けのサイトをスマホで見ても、ビューポートが考慮されていない場合はとても小さい文字になってしまうことがよくあります。

基本的な設定は、

<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

このようにしておけば問題はありません。

また、vwvhvminvmaxというレスポンシブデザインに向けた単位もあります。

これはそれぞれビューポートに対する割合で、例えば基準となるビューポートの幅は100vwになります。

文字の大きさを設定する

それではこのビューポートの割合に対する文字の大きさを、calcを使って調整してみましょう。

こちらのコードをご覧ください。

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
    html {
        font-size: calc(100vw / 20);
    }
    .box {
        margin: 0 auto;
        border: solid 1px #000;
        width: calc(100% - 100px);
    }
    .text {
        text-align: center;
    }
</style>
     
<body>
    <div class="box">
        <p class="text">あああああ</p>
    </div>
</body>
</html>

実行結果

こちらのコードでは分かりやすいように文字を大きく設定しました。font-sizeでcalc(100vw / 20);となっているので、100vwというビューポートの幅に対して常に20で割った値が適用されています。

こちらもブラウザのウィンドウの横幅を変えてみると、常にその割合で文字の大きさが変わっていることが分かると思います。

まとめ

この記事ではcalcを使ったレスポンシブに対応する方法を簡単に解説してきました。

レスポンシブデザインがどのような仕組みで動いているのか、分かって頂けたでしょうか?

もちろん、レスポンシブデザインに対応する方法はこれだけではありません。ただし、calcを使った方法は一般的な方法で、対応できる部分も多い方法の一つです。

calcの使い方について忘れてしまった場合は、ぜひまたこの記事をご覧ください!

この記事を書いた人

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

目次