【初心者向け】CSSで計算式を作れるcalc()の使い方
「CSSで値を直接数値で入力するのではなく、計算式にしてみたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- CSSで計算式を作れるcalcの使い方がわかる
webサイト上のコンテンツが増えてくると、今後の修正等に柔軟に対応する必要が出てきます。是非本記事をお読みいただき、calcに対する理解を深めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSで計算式を作れるcalcとは
CSSには、計算式を可能にするcalc()というファンクションがあります。
例えばですが、「図や写真の縦幅は素材によって変更されるケースはあるが、横幅は縦幅の必ず70%にして表示したい」という場合、毎回図や写真の縦幅・横幅を計算してCSSに数値で入力するのは非常に煩雑ですし、ミスにも繋がります。
こういう時に”横幅は縦幅の70%”という掛け算の式をCSSに入れておければ、今後追加する図や写真は自動的に縦幅の値が決まるので非常に便利です。
calcファンクションは、当初はchromeやsafariがサポートしていなかったので注目度は低かったですが、最近ではそれなりにサポートされてきています。
CSSソースコード内でのcalcの基本的な使い方
それでは、早速CSSでcalcの基本的な使い方を解説していきます。calcファンクションでは足し算・引き算・掛け算・割り算の四則演算をすることができます。
どの計算をする場合でも、以下のように計算式をcalc内に記述する大方針は同じです。
calc( 計算式 )
(1)足し算
足し算の基本的な形を見ていきましょう。以下は、横幅を20%より15pxだけ大きく表示したい場合の書き方です。
width: calc( 20% + 15px );
後ほども出てきますが、四則演算記号の「+」の前後は空白を半角1文字ずつあけるようにしてください。
(2)引き算
続いて、引き算の例です。以下は、横幅を100%から20px引く場合の書き方です。
width: calc(100% - 20px)
(3)掛け算
掛け算の例です。以下は、3文字分の4倍の幅にしたいときの書き方です。
width: calc( 3em * 4 );
掛け算を使う際の注意点は、掛ける数の片方（今回の例では3か4）は単位を持たない数値にする必要があることです。
(4)割り算
最後に、割り算です。以下は、横幅を4等分したい場合の書き方です。
width: calc( 100% / 4 );
当然ですが、割り算の割る方の値（今回の例では4）には単位を付けることはできないので注意してください。
(5)実践的な書き方
ここまで基本的な四則演算の書き方を紹介してきたので、実際にHTMLとCSSでの具体例を見ていきましょう。
具体例1
<html>
<head>
</head>
<body>
<p class="sample1">width: 100%; を指定</p>
<p class="sample2">width: calc(100% - 200px); を指定</p>
</body>
</html>
p.sample1, p.sample2 {background-color: skyblue;}
p.sample1 {width: 100%;}
p.sample2 {width: calc(100% - 200px);}
コピーアンドペーストでいいので試してみてください。sample2の行の背景色（skyblue）は、sample1より200px短く表示されることが確認できます。
具体例2
四則演算を複数使っている例です。
width:calc(100% - 20px * 2);
具体例3
入れ子の計算をしている例です。
width:calc(calc(100% / 5) * 2);
CSSでcalcを使う際の注意点
ここでは、実際にcalcファンクションを使う時の注意点を紹介します。
(1)四則演算の記号の前後には空白を入れること
四則演算の記号（+や－）と数値の前後はぴったりくっつけるのではなく、空白を必ず入れるようにしてください。
下の例では、(A)はうまく計算が反映されますが(B)は反映されません。
/* (A)OK */ width: calc( 100% - 15px ); /* (B)NG */ width: calc( 100% -15px );
上記の例では(B)は-の記号と15がくっついているので引き算としてではなく、「-15px」というただの数値として認識されてしまいます。
(2)単位をつけるべき場所とつけない場所を正しく理解すること
calcファンクションでは、数値に単位をつけるべき場所とつけてはいけない場所があります。
例えば、足し算では以下の例を出していました。
width: calc( 20% + 15px );
これは「横幅の20%に15px足す」という意味なので、もしも以下のように書いてしまうと「横幅の20%に、何を単位として足せばいいのかわからない」と認識されてしまいます。
/* NG */ width: calc( 20% + 15 );
また、割り算では以下の例を出していました。
width: calc( 100% / 4 );
この例の割る数（4）には単位をつけられません。割り算なので、当然と言えば当然です。
以下のように書いてしまうと「横幅の100%を4pxで割るってどういうこと？」とプログラムが理解できず、反映されません。
/* NG */ width: calc( 100% / 4px );
(3)calcが使えない場合があること
本記事冒頭でも書きましたが、calcファンクションをサポートしているブラウザは徐々に増えてきています。
しかし、稀に使用しているブラウザやブラウザのバージョンによってはcalcファンクションが効かない場合があるので、都度試してみることが必要です。
最後に
いかがでしたでしょうか。calcファンクションの基本的な使い方を紹介してきました。
今回はシンプルな四則演算の例がメインでしたが、本記事の内容を使いこなせれば、自分が実現したい内容をコーディングするのもそこまで難しいことではありません。
是非本記事をきっかけに、webサイト設計を進めてください。
