レスポンシブでcalc関数を利用する
レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。
参考Webページ
calc関数の書式
width:calc( boxSize% - fixedValue )
bozSize:親要素のウインドウ幅に対する割合
fixedValue:boxSizeから差し引くmarginやpaddingなどの固定値
<注意>calcの演算子(上記ではー(マイナス))の両端は必ずスペースを入れる
calc関数を使ってみる
divでBOXを作り、BOX間を20pxにするために margin:10px としてfloatさせています。BOX間の20pxはウインドウのサイズが変わっても20pxを維持させます。
calc() を使うことでウィンドウサイズが変わってもマージンは変化しません。
1行目のBOX
BOXは1個なので幅は100%、marginが左右に10pxずつ付くので固定値は20pxになり、calc() の記述は、
width: calc(100% - 20px);
となります。
2行目のBOX
BOXは2個なので幅は50%(100%÷2)。固定値はBOX1個に対してを考えるので、BOXが1行に1個の時と同様です。BOX1個にmarginが左右に10pxずつ付くので、固定値は20pxになります。calc() の記述は、
width: calc(50% - 20px);
となります。
3行目のBOX
BOXは3個なので幅は33.33%(100%÷3)。固定値の考え方は1行目から4行目まですべて同じです。BOX1個にmarginが左右に10pxずつ付くので固定値は20pxになります。calc() の記述は、
width: calc(33.33% - 20px);
となります。
4行目のBOX
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>