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

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

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

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

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

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

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

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

この記事の目次

1 calcとは
2 calcでwidthを設定する
3 calcで文字の大きさを設定する
4 まとめ

calcとは

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

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

width: calc(100% - 100px);

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

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

【なかなかエラーが解決できない…そんな悩みを解決します！】

登録無料で始められるプログラミングスクール「侍テラコヤ」

・回答率100%のQ&A掲示板でエラーを解決！
・現役エンジニアとのオンライン相談で悩みを解決！
・50種類以上の教材で複数言語を習得！

⇒ 侍テラコヤについて詳しく見る

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>

実行結果