CSSで%での指定と、Pixelでの指定を組み合わせて設定したい - calc関数の利用 - CSS
CSSのcalc関数を利用について紹介します。
概要
CSSで枠の幅などを設定する際に、%での指定と、Pixelでの指定を組み合わせて設定したい場合があります。calc関数を利用することで単位の違う値を演算してCSSのプロパティに指定することができます。
書式
注意
値と値の間の"-" "+" 記号の間には " " を入れて開ける必要があります。
calcを利用したCSS例1
下図の枠を作成することを考えます。ページ幅いっぱいの枠で左右に32pixelの余白がある枠です。
calc関数を使用しない実装では、枠のwidthを100%に設定し、margin-left, margin-right に32px を設定すると同様の枠が作成できますが、今回はmarginの相殺が発生する状況でmarginが利用できない想定として、widthプロパティのみを設定して上図の枠を作成します。
コード
下記のコードを記述します。
body {
text-align:center;
}
.frame {
width: calc(100% - 64px);
margin-left: auto;
margin-right: auto;
background-color: #fff09b;
height:96px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="calc01.css"/>
</head>
<body>
<div class="frame">
枠です。
</div>
</body>
</html>
解説
CSSの下記コードがcalc関数を利用した設定になります。今回の例では左右に32pixelの余白をとるため、枠の幅は100%から左右の32pixelの余白の合計64pixelを引いた値に設定します。
width: calc(100% - 64px);
margin-left, margin-right の値をautoに設定することで枠を中央に配置できます。
margin-left: auto;
margin-right: auto;
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。黄色の枠が表示されます。左右に32pixelの余白がとられていることが確認できます。
ウィンドウの横幅を小さくします。枠の幅はウィンドウの幅に合わせて縮小しますが、余白の32pixelは縮小されず、幅は固定されたままです。
calcを利用したCSS例2 (段組みの例)
下図の枠を作成することを考えます。120pixelの左枠があり、残りの幅が右枠になります。左右に32pixelの余白があるページです。
calc関数を使用しない実装では、両方の枠の幅を%で指定するか、枠全体の幅を固定の幅とすると実装できます。片方の枠をpixel指定して、残りをページの残り幅全体とするのは難しいです。
コード
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="calc02.css"/>
</head>
<body>
<div class="LeftFrame">
左側の枠です。
</div>
<div class="RightFrame">
右側の枠です。
</div>
</body>
</html>
body {
text-align:center;
margin:0;
padding:0;
}
.LeftFrame {
width: 120px;
margin-left: 32px;
float: left;
height: 96px;
background-color: #ffcdcd;
}
.RightFrame {
width: calc(100% - 32px - 32px - 120px);
float: left;
height: 96px;
background-color: #c9f3b6;
}
解説
今回の例では左側の枠(LeftFrame)は左に32pixelの余白をとり、幅を120pixelとします。またfloat:left を指定し段組みとします。
.LeftFrame {
width: 120px;
margin-left: 32px;
float: left;
height: 96px;
background-color: #ffcdcd;
}
右側の枠(RightFrame)はwidthプロパティをcalc関数を用いて指定しています。全体の幅100%から、左側のマージン32pixel, 右側のマージン32pixel, 左側の枠の幅120pixel を引いた値を右側の枠の幅として指定しています。
.RightFrame {
width: calc(100% - 32px - 32px - 120px);
float: left;
height: 96px;
background-color: #c9f3b6;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。2段組み表示になっており、ページ左右の32pixelの余白もあります。
ページの幅を縮小すると右側の枠の大きさが小さくなり、ページ幅に合わせてリサイズされることも確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
