CSS calc()でvhとpxを組み合わせる
2024-10-05
CSSのcalc()でvhマイナスpxを使用可能か？
例
height: calc(100vh - 50px);
このコードは、要素の高さをビューポートの高さから50ピクセルを引いた値に設定します。
calc()関数の使用方法
- 関数名
calc() - 演算子
+,-,*,/ - 単位
同じ単位同士で演算できます。異なる単位は互換性がないため、直接演算できません。
width: calc(100% - 2rem); // OK
width: calc(100px - 2em); // OK
width: calc(100px - 2rem); // NG (異なる単位)
Lessでの使用
LessはCSSのプリプロセッサであり、変数や関数などの機能を提供します。calc()関数もLessで使用できます。
@viewport-height: 100vh;
@padding: 20px;
height: calc(@viewport-height - @padding);
注意点
- ブラウザのサポート状況を確認してください。古いブラウザではcalc()関数がサポートされていない場合があります。
- 複数の単位を混ぜて計算する場合、単位の変換が必要になることがあります。
CSSのcalc()でvhとpxを組み合わせる
例1: ビューポートの高さを基準に要素の高さを設定する
.element {
height: calc(100vh - 50px);
}
例2: 親要素の幅からマージンとパディングを差し引いて子要素の幅を設定する
.parent {
width: 800px;
}
.child {
width: calc(100% - 20px - 10px);
}
このコードは、.childクラスの子要素の幅を、親要素の幅から20ピクセル（マージン）と10ピクセル（パディング）を引いた値に設定します。
例3: 複数の単位を組み合わせる
.element {
width: calc(50% - 1rem);
}
このコードは、.elementクラスの要素の幅を、親要素の幅の50%から1レム（相対的なフォントサイズ単位）を引いた値に設定します。
CSSのcalc()の代替方法
CSSのcalc()関数を使用せずに、vhとpxを組み合わせる方法もあります。
JavaScriptを使用する
JavaScriptを使用して、要素のサイズや位置を動的に計算することができます。
const element = document.getElementById('element');
const viewportHeight = window.innerHeight;
element.style.height = `${viewportHeight - 50}px`;
CSSのメディアクエリを使用する
メディアクエリを使用して、異なる画面サイズに合わせて要素のスタイルを調整することができます。
@media (min-height: 600px) {
.element {
height: 400px;
}
}
@media (max-height: 599px) {
.element {
height: calc(100vh - 50px);
}
}
このコードは、画面の高さが600ピクセル以上の場合は要素の高さを400ピクセルに設定し、画面の高さが599ピクセル以下の場合はcalc()関数を使用して要素の高さを設定します。
CSSのflexboxやgridレイアウトを使用する
flexboxやgridレイアウトを使用して、要素のサイズや位置を相対的に設定することができます。
.container {
display: flex;
height: 100vh;
}
.element {
flex: 0 0 auto;
height: 50px;
}
このコードは、flexboxを使用して要素の高さを50ピクセルに設定し、残りのスペースを親要素の高さに合わせて自動的に調整します。
css less
