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

2024年5月6日

侍テック編集部

この記事では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>

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

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

これはそれぞれビューポートに対する割合で、例えば基準となるビューポートの幅は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>

実行結果