6.1 calc() 関数の主な機能
calc() 関数は CSS で計算操作を行うことを可能にするんだ。これにより、より柔軟で適応性のあるスタイルを作成できるんだよ。この関数は、異なる単位の組み合わせや動的な値の計算（サイズ、余白、ボーダーなど）に特に便利なんだ。
calc() 関数は四つの基本的な数学操作を行えるんだ：足し算、引き算、掛け算、割り算。これらの操作を使って異なる単位（ピクセル、パーセント、em, rem など）を組み合わせることができ、適応性のある動的スタイルを簡単に作成できるよ。
文法:
セレクタ {
プロパティ: calc(式);
}
操作例
- 足し算:
calc(100% + 20px) - 引き算:
calc(50% - 10px) - 掛け算:
calc(10px * 2) - 割り算:
calc(100px / 2)
例:
<div>
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
div {
width: calc(100% - 50px);
margin: calc(1em + 10px);
background: lightblue;
}
この例では:
- 要素の幅は
100%-50pxとして計算されるよ - マージンは
1emと10pxの合計として計算されるんだ
6.2 calc() 関数の使用例
1. 足し算と引き算
calc() 関数はよく値を加算・減算するのに使われるんだ。これで要素のサイズや余白をもっと正確にコントロールできるようになるよ。
例1: パーセントとピクセルの足し算
この例では、コンテナの幅は親要素の100%から40ピクセル引いたものとして計算されるよ。これにより、余白やコンテナ内の他の要素を考慮することができるんだ。
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
width: calc(100% - 40px);
margin: 20px;
background: lightgreen;
}
例2: 固定値の引き算
この例では、サイドバーの幅は親要素の幅から250ピクセルを引いたものとして計算され、メインコンテンツのスペースを残すんだよ：
<div class="sidebar">
<ul>
<li><a href="#"></a>Article 1</li>
<li><a href="#"></a>Article 2</li>
<li><a href="#"></a>Article 3</li>
</ul>
</div>
.sidebar {
width: calc(100% - 250px);
background: tomato;
}
2. 掛け算と割り算
calc() 関数はまた、掛け算と割り算も可能なんだ。これがプロポーショナルなサイズや余白の作成に役立つよ。
例3: 掛け算
この例では、要素の高さは20ピクセル×3として計算され、計算結果は60ピクセルになるよ：
<div class="element">Element</div>
.element {
height: calc(20px * 3);
background: lightpink;
}
例4: 割り算
この例では、ブロックの幅は親要素の幅の1/3として計算され、3つの等しい列を作成できるんだ：
<div class="box">
Box
</div>
.box {
width: calc(100% / 3);
background: yellow;
}
6.3 異なる単位の組み合わせ
calc() 関数のキーとなる機能のひとつは、異なる単位を組み合わせて、適応性があり柔軟なスタイルを作成できることなんだよ。
例5: パーセントとピクセルの組み合わせ
この例では、ヘッダーの高さはビューの高さから50ピクセルを引いたものとして計算され、固定された余白を考慮するんだ。
<header class="header">
<nav>
<ul>
<li>ホーム</li>
<li>私たちについて</li>
<li>コンタクト</li>
</ul>
</nav>
</header>
.header {
height: calc(100vh - 100px);
background: lightgreen;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px;
}
動的計算によるサイズ
calc() 関数は、要素のサイズを動的に計算するのに役立ち、デザインをより適応性があり柔軟にするんだ。
例6: 動的計算による幅
この例では、コンテンツの幅は親要素の幅から各サイド20ピクセルずつの余白を2倍にして引いたものとして計算されるんだ：
<div class="content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.content {
width: calc(100% - 2 * 20px);
background: lightgreen;
}
6.4 メディアクエリでの calc() の使用
calc() 関数は、メディアクエリの中で使用して適応的なスタイルを作成できるよ。
例7: メディアクエリでの適応的な余白
この例では、コンテナの余白は、ウィンドウの幅が600ピクセル以上になったときに、考慮して増加するんだ：
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
padding: 10px;
background: tomato;
}
@media (min-width: 600px) {
.container {
padding: calc(10px + 2vw);
}
}
例8: メディアクエリでの適応的なサイズ
この例では、コンテナの余白はスクリーン幅が600ピクセル以下のときに半分に減少し、デザインの適応性を向上させるんだ：
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
:root {
--main-padding: 20px;
}
.container {
padding: var(--main-padding);
background: yellow;
}
@media (max-width: 600px) {
.container {
padding: calc(var(--main-padding) / 2);
}
}
6.5 メリットとデメリット
calc() 関数を使う利点:
1. 柔軟性。 calc() 関数を使うことで、異なる単位の組み合わせや数学操作を通じて、より柔軟で適応性のあるデザインを作成できるんだ。
2. 動的なスタイル管理。 calc() を使って要素のサイズや余白を動的に変更することで、デザインをより反応的かつ適応的にできるよ。
3. 複雑な計算を簡単に。 calc() 関数は、CSS で複雑な計算を簡単に行えるから、簡単な数学操作のために JavaScript を使う必要がないんだ。
calc() 関数の制限と特徴:
1. 演算子の周りのスペース。 calc() 式では、演算子の周りにスペースが必要なんだよ。例えば、calc(100% - 50px) は正しいけど、calc(100%-50px) はエラーになるんだ。
2. ブラウザの互換性。 calc() 関数はほとんどの現代のブラウザでサポートされているけど、古いバージョンでは互換性のチェックが必要かもしれないね。
3. パフォーマンス。 calc() 関数を使うと、ページのレンダリング時間が少し増えることがあるんだ、特に複雑な計算や頻繁な値の変更があるときはね。
GO TO FULL VERSION