HTML5+CSS3でサイトを作ってみる。

cssで計算ができる calc()

hongkiat.comさんより
整数値を設定できるプロパティに対して、+, -, *, / の計算式を用いていろいろな計算ができるようです。
長さ、周波数、角度、時間、回数など、整数で指定できる値では比較的使用可能な様子。 IE8以下とAndroidはサポート対象外だそうです。解釈など間違っていたらご指摘お願いしますm(_ _)m

親のwidthを基準として子のwidthを設定し、かつ数ピクセル加算したり減算したりする

子要素の幅を親要素の幅の何パーセントで設定する、というのは普通に出来ますが、calc()を使えば それに何ピクセルプラスする、マイナスする、ということができます。 もちろん、親要素の大きさを変えれば子要素も同様に変わります。

サンプルhtml

--[ html ]-----------------------

<div id="addition300px">
  <div class="add0px">親要素のwidthの70%</div>
  <div class="add5px">親要素のwidthの70% + 5px</div>
  <div class="sub5px">親要素のwidthの70% + 5px</div>
  <div class="add23px">親要素のwidthの70% + 23px</div>
  <div class="sub23px">親要素のwidthの70% + 23px</div>
</div>

--[ CSS ]------------------------

#addition300px{
    position:relative;
    background:#ccc url(../img/bg_trans.gif) repeat;
    width:300px;
    border:2px solid #333;
}
#addition300px:after{/*ここは実際は必要ありません*/
    content:"";
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:70%;
    height:100%;
    background:#cff;
    z-index:0;
}
#addition300px div{/*ここは実際は必要ありません*/
    position:relative;
    z-index:1;
}
.add0px{
    background:#cff;
    width:70%;
}
.add5px{
    background:#fcc;
    width:-webkit-calc(70% + 5px);
    width:-moz-calc(70% + 5px);
    width:calc(70% + 5px);
}
.add23px{
    background:#fcc;
    width:-webkit-calc(70% + 23px);
    width:-moz-calc(70% + 23px);
    width:calc(70% + 23px);
}
.sub5px{
    background:#ccf;
    width:-webkit-calc(70% - 5px);
    width:-moz-calc(70% - 5px);
    width:calc(70% - 5px);
}
.sub23px{
    background:#ccf;
    width:-webkit-calc(70% - 23px);
    width:-moz-calc(70% - 23px);
    width:calc(70% - 23px);
}

子要素のフォントサイズを親の2倍で指定する。

calc()はfont-sizeにも指定できます。 下のサンプルは親要素でfont-sizeを10pxに指定していますが、calc()によって子要素が親の2倍の大きさになるようにしています。 calc()で指定してあるものに関しては、親要素のfont-sizeを変更すると子要素もそれに従い変化します。

サンプルhtml

--[ html ]-----------------------

<div id="multiplication">
  親要素 font-size:10px;
  <div class="nonmulti">子要素 font-size:20px; </div>
  <div class="multi2x">子要素 親のfont-sizeの2倍(要は20px);</div>
</div>

--[ CSS ]------------------------

#multiplication{
    font-size:10px;
}
#multiplication .nonmulti{
    font-size:20px;
}
#multiplication .multi2x{
    font-size:-webkit-calc(1em * 2);
    font-size:-moz-calc(1em * 2);
    font-size:calc(1em * 2);
}

子要素を3等分に分割する

親要素の幅を100%として、子要素をその中で3等分の幅にして並べます。

サンプルhtml

--[ html ]-----------------------

<div id="division">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

--[ CSS ]------------------------

#division div{
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);

    float: left;
    height: 100px;
    color: #fff;
}
#division .one {background: #333;}
#division .two {background: #666;}
#division .three {background: #999;}

いろいろミックス1

足したり引いたり掛けたり割ったり、組み合わせも自由なようです。 下のサンプルでは、分数のような形で、親要素に対して左側を1/5幅,右側を4/5幅にしています。 親の幅を変更すれば、同じ比率で子要素も変化します。

サンプルhtml

--[ html ]-----------------------

<div id="mix1">
  <div class="left">1</div>
  <div class="right">2</div>
</div>

--[ CSS ]------------------------

#mix1{
    border:1px solid #000;
    width : 500px ;
    float:left;
}
#mix1 .left {
    float:left;
    background:#666;
    width : -webkit-calc(100% * 1/5) ;
    width : -moz-calc(100% * 1/5) ;
    width : calc(100% * 1/5) ;
}
#mix1 .right {
    float:left;
    background:#999;
    width : -webkit-calc(100% * 4/5) ;
    width : -moz-calc(100% * 4/5) ;
    width : calc(100% * 4/5) ;
}

いろいろミックス2

W3Cさんのサイトで載っていたものをそのまま書いて見ました。 なんだかいろいろできるみたいですねえ。。

サンプルhtml

--[ html ]-----------------------

<div id="mix2">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

--[ CSS ]------------------------

#mix2 div{
    margin: 1em;
    border: solid 1px;
    float:left;
    width: -webkit-calc(100%/3 - 2*1em - 2*1px);
    width: -moz-calc(100%/3 - 2*1em - 2*1px);
    width: calc(100%/3 - 2*1em - 2*1px);
}