レスポンシブでcalc関数を利用する

レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。

 

参考Webページ

 

developer.mozilla.org

 

calc関数の書式

 width:calc( boxSize% - fixedValue )

  bozSize:親要素のウインドウ幅に対する割合
  fixedValue:boxSizeから差し引くmarginやpaddingなどの固定値

  <注意>calcの演算子(上記ではー(マイナス))の両端は必ずスペースを入れる

 

calc関数を使ってみる

divでBOXを作り、BOX間を20pxにするために margin:10px としてfloatさせています。BOX間の20pxはウインドウのサイズが変わっても20pxを維持させます。  

f:id:develog:20161127174005p:plain

calc() を使うことでウィンドウサイズが変わってもマージンは変化しません。

f:id:develog:20161127174014p:plain

 

1行目のBOX

f:id:develog:20161127174022p:plain

f:id:develog:20161127174026p:plain

BOXは1個なので幅は100%、marginが左右に10pxずつ付くので固定値は20pxになり、calc() の記述は、

      width: calc(100% - 20px);

となります。

 

2行目のBOX

f:id:develog:20161127174032p:plain

f:id:develog:20161127174038p:plain

BOXは2個なので幅は50%(100%÷2)。固定値はBOX1個に対してを考えるので、BOXが1行に1個の時と同様です。BOX1個にmarginが左右に10pxずつ付くので、固定値は20pxになります。calc() の記述は、

      width: calc(50% - 20px);

となります。

 

3行目のBOX

f:id:develog:20161127174041p:plain

f:id:develog:20161127174045p:plain

BOXは3個なので幅は33.33%(100%÷3)。固定値の考え方は1行目から4行目まですべて同じです。BOX1個にmarginが左右に10pxずつ付くので固定値は20pxになります。calc() の記述は、

      width: calc(33.33% - 20px);

となります。

 

4行目のBOX

f:id:develog:20161127174048p:plain

f:id:develog:20161127174051p:plain

BOXは4個なので幅は25%(100%÷4)。固定値の考え方は1行目から4行目まですべて同じです。BOX1個にmarginが左右に10pxずつ付くので固定値は20pxになります。calc() の記述は、

      width: calc(25% - 20px);

となります。

 

今回のソース

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>calc実験</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html, body, p {
margin: 0;
padding: 0;
}
#container {
width: calc(100% - 20px);/*paddingの固定値10pxを引く*/
padding: 10px;
background: #DDD;
}
.box1 {
width: calc(100% - 20px);/*左右marginの固定値20pxを引く*/
height: 100px;
background: #D1C516;
margin: 10px;
}
.wrap {
width: 100%;
overflow: hidden;
}
.box2 {
width: calc(50% - 20px);/*左右marginの固定値20pxを引く*/
height: 100px;
margin: 10px;
float: left;
}
.box2-1 {
background: #D1C516;
}
.box2-2 {
background: #4EAF12;
}
.box3 {
width: calc(33.33% - 20px);/*左右marginの固定値20pxを引く*/
height: 100px;
margin: 10px;
float: left;
}
.box3-1 {
background: #D1C516;
}
.box3-2 {
background: #4EAF12;
}
.box3-3 {
background: #208829;
}
.box4 {
width: calc(25% - 20px);/*左右marginの固定値20pxを引く*/
height: 100px;
margin: 10px;
float: left;
}
.box4-1 {
background: #D1C516;
}
.box4-2 {
background: #4EAF12;
}
.box4-3 {
background: #208829;
}
.box4-4 {
background: #065A05;
}
</style>
</head>

<body>
<div id="container">
<p>width: calc(100% - 20px)</p>
<div class="box box1"></div>

<p>width: calc(50% - 20px)</p>
<div class="wrap">
<div class="box2 box2-1"></div>
<div class="box2 box2-2"></div>
</div>

<p>width: calc(33.33% - 20px)</p>
<div class="wrap">
<div class="box3 box3-1"></div>
<div class="box3 box3-2"></div>
<div class="box3 box3-3"></div>
</div>

<p>width: calc(25% - 20px)</p>
<div class="wrap">
<div class="box4 box4-1"></div>
<div class="box4 box4-2"></div>
<div class="box4 box4-3"></div>
<div class="box4 box4-4"></div>
</div>

</div>
</body>
</html>