CSSの「calc()関数」は、要素のサイズや位置を動的に計算できる便利なツールです。固定値や割合、その他の単位を組み合わせてレイアウトを柔軟にコントロールできるため、レスポンシブデザインや高度なレイアウト作成に役立ちます。本記事では、calc()関数の基本的な使い方から具体的な活用例までを解説します。
calc()関数とは？
calc()関数は、CSSプロパティ内で計算を行い、その結果を値として適用するための機能です。以下のような計算が可能です。
- 足し算 (
+) - 引き算 (
-) - 掛け算 (
*) - 割り算 (
/)
基本構文
プロパティ: calc(計算式);基本的な使用例
1. 固定幅と割合の組み合わせ
以下の例では、幅を50%に固定値の20pxを加えた動的なサイズを設定します。
.container {
width: calc(50% + 20px);
}この指定により、コンテナの幅は画面幅に応じて変化しつつ、常に20pxの余裕が追加されます。
2. マージンやパディングの計算
マージンをコンテナ幅に基づいて動的に設定することも可能です。
.box {
margin: calc(10% - 5px);
}実用例
1. フルスクリーンレイアウト
画面全体を使いつつ、ヘッダーやフッターの高さを差し引いたメインコンテンツエリアを指定します。
body {
margin: 0;
}
header {
height: 60px;
}
footer {
height: 40px;
}
main {
height: calc(100vh - 100px); /* 画面の高さ - ヘッダーとフッターの合計 */
}2. 横並びの要素間のスペース調整
2つの要素を横並びに配置し、その間にスペースを設けます。
.column {
width: calc(50% - 10px); /* 要素幅を50%にし、間隔を調整 */
float: left;
margin-right: 10px;
}
.column:last-child {
margin-right: 0;
}3. 動的なフォントサイズ
画面幅に応じてフォントサイズを動的に変更します。
.text {
font-size: calc(16px + 1vw); /* ベースサイズ + ビューポート幅の1% */
}注意点
１．スペースを必ず入れるcalc()内の演算子（+, -, *, /）の前後にはスペースを入れる必要があります。以下はエラーの例です。
/* エラー例 */
width: calc(100%-20px);２．ブラウザ対応calc()は主要なブラウザでサポートされていますが、古いブラウザでは利用できない場合があります。特に、IE9以前では動作しません。
応用テクニック
グリッドレイアウトの調整
CSSグリッドでギャップを動的に設定することで柔軟なデザインを実現します。
.grid {
display: grid;
grid-template-columns: repeat(3, calc(33.33% - 10px)); /* カラム幅を計算 */
gap: 10px;
}フレックスボックスで中央揃え
フレックスボックスを用いて要素を動的に中央揃えにします。
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 50px); /* ビューポート高さから50pxを引く */
}まとめ
CSSのcalc()関数を使うと、柔軟で動的なレイアウトが簡単に作成できます。特にレスポンシブデザインやコンテナのサイズ調整など、デザインの細かい要件に対応する際に役立ちます。この機能をマスターして、より洗練されたウェブデザインを実現しましょう。
最後まで読んでいただきありがとうございます！
このブログは初心者向けwebデザイナー向けにHTML、CSSの基礎知識を発信しています。
この記事を読んだ方に少しでもお役に立てれば幸いです。
