【calc】計算式でCSSの値を指定してみたで！

2016/07/02 2017/02/26

CSSコーディングをしていると結構な頻度でぶち当たる問題。

「そんな具体的な数値わかるかい！」

レスポンシブデザインが主流となり、かつてのようにpx単位でコンテンツ幅や要素の幅を指定することも少なくなりました。
100%とか1emとかはたまたvwとか様々な単位が混在していろいろつじつまが合わなくなってきた今日この頃いかがお過ごしでしょうか？

そんな中、CSS内で四則演算を行い、その計算結果を値に指定できる方法があるので試してみた。

Contents

1 calc ( )ファンクション
2 calc ( )ファンクションの使用例
3 よかったこと
4 懸念点

calc ( )ファンクション

その夢のような機能が「calc ( )ファンクション」だ。

<length>、<frequency>、<angle>、<time>、<number>、<integer>の値を用いるCSSにて使用可能。
最もその活躍が見られるのは。
widtgh/height/font-size/margin/paddingなどで使用する場面が多いかと。

ちなみにブラウザはIE9以降をはじめ概ねモダンブラウザでは対応している。

calc ( )ファンクションの使用例

では具体的にどのような場面で活躍するのか、
以下はその具体例。

サイドバーは固定幅、メインコンテンツは可変幅にしたい

リキッドなレイアウトで、サイドバーは固定幅、メインコンテンツは可変幅にしたい場合。
サイドバーの幅を300pxとしたとき、
例えば画面サイズが1000pxならメインコンテンツは1000px-300pxの700pxとなり、
画面サイズが1456pxの場合はメインコンテンツは1456px-300px=1156pxとしたい。
そんないちいち細かい数値を計算しているわけにはいかん。
ということで以下のように設定。

HTML

<body>
<main>メインコンテンツ</main>
<aside>サイドバー</aside>
</body>

CSS

main {
    float:left;
    width:calc(100% - 300px);
}

aside {
    float:right;
    width:300px;
}

HTML

<body>

<main>メインコンテンツ</main>

<aside>サイドバー</aside>

</body>

CSS

main {

float:left;

width:calc(100% - 300px);

}

aside {

float:right;

width:300px;

}

可変するメインコンテンツのwidthにcalc ( )を指定することで、画面幅からサイドバーの幅を引いたサイズを保持することができる。

フォントサイズを相対的に変更したい

フォントサイズの相対的な調整は「em」を用いることが多い。
しかし「em」では調整しきれない微妙なサイズを指定したいとき。
「例えば親要素より3px大きく」みたいな場合は下記のようになる。

HTML

<p id="f-sample">通常のフォントサイズ通常のフォントサイズ通常のフォントサイズ通常のフォントサイズ通常のフォントサイズ
<span>通常より3px大きく通常より3px大きく通常より3px大きく通常より3px大きく</span>
</p>

CSS

p#f-sample {
    font-size:1.2em;
}

p#f-sample span {
    font-size:calc (1em + 3px);
}

HTML

<p id="f-sample">通常のフォントサイズ通常のフォントサイズ通常のフォントサイズ通常のフォントサイズ通常のフォントサイズ

<span>通常より3px大きく通常より3px大きく通常より3px大きく通常より3px大きく</span>

</p>

CSS

p#f-sample {

font-size:1.2em;

}

p#f-sample span {

font-size:calc (1em + 3px);

}

割り切れない値を指定したい

親要素に対して%設定をし、要素を並べるパターンは多い。
半分なら「width:50%;」
1/4なら「width:25%;」
割り切れる数値の場合は全く問題ないのだが
結構使用頻度の高い1/3の場合。

HTML

<div id="parent-box">
<div class="child-box">1/3ボックス</div>
<div class="child-box">1/3ボックス</div>
<div class="child-box">1/3ボックス</div>
</div>

CSS

div#parent-box {
    width:100%;
}

div.child-box {
    width:calc(100% / 3);
    float:left;
}