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

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

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

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

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

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

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

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

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>

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

また、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で割った値が適用されています。

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


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

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

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

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

まとめ

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

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

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

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

プログラミング学習中、
誰かへ相談したいことはありませんか?

SAMURAI TERAKOYA

プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。

そんな悩みを解決できるのが、侍テラコヤです。登録無料で始められて、現役エンジニアとオンラインで相談できるほか、回答率100%のQA掲示版でプログラミングに関する悩みを解決します!

気になる方はぜひ詳細をご覧ください。

→侍テラコヤの詳細をみる

Writer

侍テック編集部

株式会社SAMURAI

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

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close