CSSのcalc()関数の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など
Post on:2018年3月23日
sponsors
calc()関数を使用すると、レスポンシブ対応ページのレイアウトや要素の配置、ビューポート幅に基づいた相対的なフォントサイズの定義などが期待通りに実装できます。
Webページやスマホアプリの実装に役立つcalc()関数の使い方を紹介します。
calc()関数はOpera Miniを除くすべてのメジャーブラウザ（IEを含む）にサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。
Calc() function with Use Cases
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- calc()関数とは
- calc()関数を使おう
- calc()関数の使い方: 相対的な固定要素の配置
- calc()関数の使い方: 天地左右の中央に配置
- calc()関数の使い方: ビューポート幅に基づいた相対的なフォントサイズ
- calc()関数の使い方: シンプルなグリッドを作成
- calc()関数の使い方: 背景を右下に配置
- 最後に
calc()関数とは
calc()関数とは簡単に説明すると、CSSで数学演算を行うことができます。calc()関数以前のCSSではプロパティの値に正確な値しか指定できませんでしたが、これはレスポンシブ対応では非常に困りました。
そこでcalc()関数の出番です。
calc()関数を使用すると、ビューポートや親要素に基づいて値を計算できます。加算や減算だけでなく、乗算や除算することもできます。
単位を揃える必要はありません。calc()関数の計算式では、相対値の単位(em, %, vw)や絶対値の単位(px)を組み合わせて、計算することができます。
|
1 2 3 |
.content { width: calc(100% - 200px); } |
calc()関数の計算式は、入れ子で利用できます。ただし、内部関数は単純なかっこ式として扱われます。
|
1 2 3 |
.content { width: calc( 100% - calc(100px * 2) ); } |
calc()関数のサポートブラウザ
calc()関数は、Opera Miniを除くすべてのメジャーブラウザにサポートされています。
calc()関数を使おう
calc()関数を使うには、CSS宣言でcalc()関数を呼び出すだけです。
論理的には幅や高さ、あるいは角度など、必要とされる値が単位ベースの場合に、calc()関数を使用できます。唯一の重要なルールは、常に演算子をスペースで区切ることです。
|
1 2 3 |
.content { width: calc(100% - 200px); } |
calc()関数の使い方: 相対的な固定要素の配置
基本的なレイアウトでよく見かける、固定幅のサイドバーやヘッダを作成する場合は、calc()関数で残りのスペースを計算できます。
これは常にサイドバーが表示されているテンプレートを作成する時に、非常に便利です。
まずは、サイドバーの幅を設定し、仮に「width:260px;」とします。あとは残りの幅に「widht:calc(100% – 260px);」を設定するだけです。
固定ヘッダの場合はコンテンツ領域の高さに対して計算するので、ヘッダの高さが80pxだとすると、「height(100vh – 80px);」になります。
もちろんemや%を使用できますが、相対値と絶対値が混ざったこのハイブリッドが簡単な方法です。
See the Pen Fix Layout Position with calc() by Adam Laki (@adamlaki) on CodePen.
|
1 2 3 4 |
<div class="container"> <div class="sidebar"></div> <div class="content"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.container { display: flex; height: 100vh; } .sidebar { width: 260px; background: #565656; } .content { background: #f1f1f1; width: calc(100% - 260px); } |
calc()関数の使い方: 天地左右の中央に配置
中央配置の最も基本的な方法は、topとleftに50％の値を設定し、要素の幅と高さの半分の値を引き戻します。この方法はflexboxとCSS Gridが出現した現在、旧式の方法ですが、まだまだ有用なテクニックと言えます。そして、calc()関数を使用すると、シンプルに実装できます。
See the Pen Absolute Centering with calc() by Adam Laki (@adamlaki) on CodePen.
|
1 2 3 |
<main> <p>CSS is awesome!</p> </main> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body { background: #3397ff; line-height: 1.5em; } main { position: absolute; top: calc(50% - 200px / 2); left: calc(50% - 200px / 2); width: 200px; height: 200px; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 16px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } |
FlexboxやCSS Gridを使用した天地左右の中央に配置する方法は、下記をご覧ください。
calc()関数の使い方: ビューポート幅に基づいた相対的なフォントサイズ
vwとvhが利用できるようになり、わたし達は常にビューポートの幅と高さを取得することができます。レスポンシブ対応の矩形を作成する時にも便利ですが、画面サイズに基づいてフォントサイズを拡大または縮小したい時にも便利です。
使い方は簡単です。vwユニットを組み合わせた基本的なcalc()関数の計算式を使用するだけで完了です。
See the Pen Pure CSS Responsive Font Size with Calc() Function by Adam Laki (@adamlaki) on CodePen.
|
1 2 |
<h1>見出し</h1> <p>本文</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
h1 { font-family: 'Playfair Display'; font-size:24px; font-weight: 300; margin-top: 0; @media (min-width: 992px) { font-size: calc(100vw / 20); } p { font-wight: 300; font-size: 14px; line-height: 1.6em; color: #555; @media (min-width: 992px) { font-size: calc(100vw / 75); } |
calc()関数の使い方: シンプルなグリッドを作成
calc()関数を使用して、シンプルな12カラムのグリッドを作成します。グリッドなので当然、flexboxやCSS Gridで可能ですが、旧式のこの方法もまだまだ使える場面があるでしょう。
calc()関数を使うポイントは、カラムのナンバーを使用した簡単な計算です。
See the Pen Layout with calc() by Adam Laki (@adamlaki) on CodePen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="container"> <div class="column--1"></div> <div class="column--11"></div> <div class="column--2"></div> <div class="column--10"></div> <div class="column--3"></div> <div class="column--9"></div> <div class="column--4"></div> <div class="column--8"></div> <div class="column--5"></div> <div class="column--7"></div> <div class="column--6"></div> <div class="column--6"></div> <div class="column--7"></div> <div class="column--5"></div> <div class="column--8"></div> <div class="column--4"></div> <div class="column--9"></div> <div class="column--3"></div> <div class="column--10"></div> <div class="column--2"></div> <div class="column--11"></div> <div class="column--1"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
container { max-width: 1600px; width: 95%; } .column--1, .column--2, .column--3, .column--4, .column--5, .column--6, .column--7, .column--8, .column--9, .column--10, .column--11, .column--12 { margin: calc(10px / 2); float: left; background: #ccc; height: 40px; } .column--1 { width: calc(100% / 12 * 1 - 10px); } .column--2 { width: calc(100% / 12 * 2 - 10px); } .column--3 { width: calc(100% / 12 * 3 - 10px); } .column--4 { width: calc(100% / 12 * 4 - 10px); } .column--5 { width: calc(100% / 12 * 5 - 10px); } .column--6 { width: calc(100% / 12 * 6 - 10px); } .column--7 { width: calc(100% / 12 * 7 - 10px); } .column--8 { width: calc(100% / 12 * 8 - 10px); } .column--9 { width: calc(100% / 12 * 9 - 10px); } .column--10 { width: calc(100% / 12 * 10 - 10px); } .column--11 { width: calc(100% / 12 * 11 - 10px); } .column--12 { width: calc(100% / 12 * 12 - 10px); } |
calc()関数の使い方: 背景を右下に配置
calc()関数を使用すると、要素の右下を下記のように相対的な値で計算して、右下に背景を配置することができます。
|
1 2 |
background-image: url(logo.png); background-position: calc(100% - 20px) calc(100% - 20px); |
しかし、これにはもっとよい解決方法があります。
background-positionプロパティは、オフセット軸を定義する2つのパラメータを指定することができます。
|
1 2 |
background-image: url(logo.png); background-position: right 20px bottom 20px; |
最後に
ここまで見てきたように、calc()関数を使うシーンは限定されていますが、非常に役立つ高度なツールです。flexboxやCSS Gridで記述できるものもありますが、古いブラウザをサポートしなければならない場合には、必ず必要とされるでしょう。
ここに挙げた例がすべてではありません。他にもアイデアがあれば、教えてください。
sponsors
