- Coding Methodology
- 第93回 cssのcalc()ファンクションで要素の幅を設定する
第93回 cssのcalc()ファンクションで要素の幅を設定する
css でwidth の値を設定するときに「px」や「%」のような単位を使用することが多いですが、CSS3 の便利な機能「calc()」を使用すると、計算式で値を設定することができます。今回は、よくあるカラムレイアウトを、calc() ファンクションを用いて実装する方法を紹介します。
100% を等分にする
ウインドウサイズにあわせて可変するリキッドレイアウトでは、% でwidth を指定することがあります。しかし、100% を3 等分したい場合（図1）には、1 カラムあたりの幅は33.3...% のように割り切れない値となってしまいます。そんな時は、1カラムの幅を「width: calc(100% / 3);」と書くことで均等に3等分することができます。（CSSの設定①）
HTMLの設定
CSSの設定 ①
％で指定したカラム間にpx で余白を設定する
カラムの幅を%で指定し、且つカラム間の余白を固定にしたい場合、%指定の要素とpx指定の要素を並べて配置すると、ウインドウ サイズによってレイアウトが崩れてしまったり、不要な余白が発生してしまいます。図2のような間隔でカラムを配置する場合は、CSSの設定②のように記述することで、10pxの間隔で均等な3カラムを配置することができます。
CSSの設定 ②
CSSの設定 ③
対応ブラウザについて
2016年9月時点での主な対応ブラウザは、chrome、firefox、Safari最新、Edge、IE9以降、iOS7以降、Android4.4以降からサポートしています。iOS6はベンダープレフィックス（-webkit-）が必要です。IE8やAndroid4.3の対応が必要な場合は、widthを併記することでフォールバックできます。（CSSの設定③）
width以外にも「長さ」「角度」「時間」などの整数値を用いる場所に使用可能な、calc()ファンクション。是非活用してみてください。
