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

レスポンシブ対応 calcを使った方法

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

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の使い方について忘れてしまった場合は、ぜひまたこの記事をご覧ください!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説