記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【CSS】calc関数の指定方法・初心者向け(サンプルコードつき)

【CSS】calc関数の使い方を初心者のかた向けに解説。
「calc関数」のルール、指定方法、メリットなどの基礎知識を解説。
すぐに実践的に使えるようになる為、各方法をサンプルコード付きで解説。
実際に手を動かして学ぶことができますので、初心者の方も安心して使用する事ができます。

カテゴリ: HTML/CSS

こんにちは!
「calc関数ってなに・・?」「便利になるの・・?」「使い方は・・?」

calc関数について良いかわからない、これから学びたいと思っている、初心者web制作者の方も多いのではないでしょうか?

calc関数は難しくありません。
簡単にいうと足し算、引き算、掛け算、割り算の4つを使用するだけです。

calc関数を使用する事ができれば、どの画面幅でも「文字の大きさ」「横幅」「高さ」などを思うとうりに指定する事ができ、webのレイアウト作成に役立ちます。加えて、自動で数値を計算してくれるので、効率的に作業をする事ができます。

今回は、初心者の方向けに、calc関数の基礎知識から使い方までを詳しく解説していきます。

calc関数とは?

calc関数とは、プロパティの値を計算式で求める事ができる関数です。
例えば、横幅指定、「width: calc(100px – 80px);」で横幅20pxを指定できる、
これがcalc関数です。

ただし上記のような指定の場合は、あまりありません。
理由は、計算しなくても、最初から20pxって書けば良いからです。

よく使われる場面でわかりやすい例は、%からpxを引く場面です。

例えば、横幅(画面幅)100%に、背景色赤色を指定

どんな画面幅からでも、100px分だけ、背景色の横幅を短くしたい。
しかし画面幅はブラウザの収縮によって変わってしまう、そんな時、
width: calc(100% – 100px)を指定する事で、ブラウザを収縮しても、自動的に下記のように100pxを引いた値を計算してくれます。

calc関数の基礎知識

使用できる計算式

使用できる計算式は、四則計算(加+)・(減-)・(乗*)・(除/)、
足し算、引き算、掛け算、割り算の4つとなります。

使用できる型

<length>(長さ)、<frequency>(周波数)、<angle>(角度)、<time>(時間)、<number>(数値)、<integer>(整数)
を使用する場所なら利用できます。

calcを使用できるプロパティ

「width」「height」「margin」「padding」「border-width」「font-size」「text-shadow」「transform」「animation」「transition」
上記プロパティであれば使用可能です。

calcの使い方

基本的な使い方

四則計算(加+)・(減-)・(乗*)・(除/)の記号を使います。

上記が基本です。
「+、ー」を」使用する場合は、半角スペースを必ず挿入しなければなりません。
「*,/」に関しては、半角スペースは、マストではありませんが、ソースコードのみやすさ、統一性のためにも、半角スペースは、入れておいた方が良いでしょう。

異なる単位の使用

calc関数では、異なる単位の数値を組み合わせて計算する事ができます。

相対値(vh, vw, %)絶対値(px)を組み合わせる事ができます。

calc計算の優先順位

calc計算の優先順位は、学校で習った通り、「(加+)・(減-)」よりも(乗*)・(除/)
の方が優先されます。

ただしこちらも学校と同じ、括弧を使えば優先順位を変更する事ができます。

calcの入れ子

calcは、入れ子にして使用する事ができます。

calcこんな場面に便利

ビューポートで便利

ビューポートとは、日本語訳するとす「表示領域」の事で、ブラウザで表示される領域の事です。

この画面の大きさは見る端末(ディバイス)やブラウザの引き伸ばしによって変わってきます、pcとスマホでは画面の大きさが違います。
calcを指定する事でどの端末にであっても、同じ割合で表示してくれます。

文字の大きをcalcで指定

画面幅に合わせて文字の大きさを設定します。

サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

※解説
画面のブラウザサイズによって、文字の大きさを変える事ができています。
横幅の100vw(横幅全体)のビューポート(表示領域)に対して、20で割った値がどの画面でも適用されています。

横幅をcalcで指定

ブラウザ画面幅に応じて要素に左右均等の幅を作る事ができています。

サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

※解説
どの画面幅でも常に100px分の余白をつけ、かつ真ん中に表示する事ができています。
これは、calc関数で画面幅100%から、100pxを引いた結果を表示させているからです。

3等分など均等割り算に便利

横幅100%を3等分にする事ができます。

サンプルコード表示動画

HTMLサンプルコード

CSSサンプルコード

※解説
どの画面幅でも、ブロックを3分の1で表示する事ができています。
これは、calc関数で横幅100%を3で割った結果を表示しているからです。

対応ブラウザ

calc関数は、Opera Mini以外のほとんどの主要ブラウザで対応しています。
IE9以前の古いバージョンのブラウザに対してもベンダーフフレックスをつけることで対応する事ができます。
ほとんんどのブラウザで使用可能なので、積極的に気にせず使用する事ができます。

まとめ

今回は、初心者の方向けに、calc関数の基礎知識から使い方までを詳しく解説していきました。
最後にポイントをまとめます。

1.calc関数とは
プロパティの値を計算式で求める事ができる関数


2.使用できる計算式は
四則計算(加+)・(減-)・(乗*)・(除/)


3.使用できる型は
<length>(長さ)、<frequency>(周波数)、<angle>(角度)、<time>(時間)、<number>(数値)、<integer>(整数)


4.calcを使用できるプロパティは
「width」「height」「margin」「padding」「border-width」「font-size」「text-shadow」「transform」「animation」「transition」


5.基本的な使い方
四則計算(加+)・(減-)・(乗*)・(除/)の記号を使い。
calc(値 (+,-,*,/) 値);


6.calc計算の優先順位は
学校で習った計算式「(加+)・(減-)」よりも(乗*)・(除/)
の方が優先される


7.calc関数のブラウザ対応は
Opera Mini以外のほとんどの主要ブラウザで対応している


いかがだったでしょうか?
関数というと少し難しく感じたかもしてませんが、足し算、引き算、掛け算、割り算の4つを使用するだけです。
calc関数を使用する事ができれば、どの画面幅でも「文字の大きさ」「横幅」「高さ」などを思うとうりに指定する事ができ、webのレイアウト作成に役立ちます。加えて、自動で数値を計算してくれるので、効率的に作業をする事ができますので積極的に使用してみてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。