CSSでcalc()関数を利用して要素を横並びにしたり要素の高さを計算式で指定する方法

2023.11.11｜コーディング

ウェブデザインにおいて、要素の配置やサイズ設定は柔軟で動的であることが求められます。その中でも、CSSの「calc()」関数は便利なツールの一つで、様々なプロパティに計算を組み込むことができます。
さまざまなデバイスや画面サイズに対応するためには、スタイルを柔軟に調整できる仕組みが必要です。
「calc()」関数を利用することで、要素の配置やサイズ設定に数学的な計算を取り入れ、動的でレスポンシブなデザインを構築できます。

今回は、CSSでcalc()関数を利用して要素を横並びにしたり要素の高さを計算式で指定する方法を解説します。

「calc()」関数とは？

「calc()」は、Cascading Style Sheets（CSS）で使用される非常に便利な計算関数であり、これにより柔軟でダイナミックなスタイルの適用が可能になります。この関数を使用すると、数学的な演算を組み合わせて、要素のプロパティに対する値を動的に計算できます。
主に、レスポンシブなデザインやレイアウトの構築、特定の条件に基づいたスタイルの適用など、多岐にわたる用途で利用されます。

基本的な構文は、「calc(式)」であり、ここで式には四則演算や括弧を含む数学的な式を記述します。この関数を使用することで、静的な値と可変の値を組み合わせたり、動的な条件に基づいてスタイルを制御したりすることができます。

「calc()」関数を利用して要素を横並びにする方法

「calc()」関数を使用した要素の横並びは、レイアウトを絶妙に調整するのに役立ちます。
例えば、横幅に関する計算を柔軟に行うことができます。これにより、異なる画面サイズやデバイスに対応した見栄えの良いデザインを作成できます。

「calc()」関数を利用して要素を横並びにする場合は「display」プロパティを用いて「flex」関数を使用し横並びに設定し、さらに「width」プロパティを用いて「calc()」関数を使用して要素の一方は固定幅、もう一方は可変幅にすることで要素を横並びに指定することができます。

「calc()」関数の四則演算に用いる記号

値	概要
+	足し算
–	引き算
*	掛け算
/	割り算

例（+で設定）

左の要素

右の要素

htmlコード

<div class="box1">
<div class="box_left1">左の要素</div>
<div class="box_right1">右の要素</div>
</div>

cssコード

.box1{
  display: flex;
  max-width:100%;
  margin:0 auto 5%;
}
.box_left1 {
  width: 200px;
  text-align: center;
  color:#fff;
  background-color:#fa41a1;
}
.box_right1{
  width: calc(200px + 300px);
  text-align: center;
  color:#fff;
  background-color:#fe80c1;
}

例（-で設定）

左の要素

右の要素

htmlコード

<div class="box1">
<div class="box_left2">左の要素</div>
<div class="box_right2">右の要素</div>
</div>

cssコード

.box1{
  display: flex;
  max-width:100%;
  margin:0 auto 5%;
}
.box_left2 {
  width: 200px;
  text-align: center;
  color:#fff;
  background-color:#fa41a1;
}
.box_right2{
  width: calc(100% - 200px);
  text-align: center;
  color:#fff;
  background-color:#fe80c1;
}

例（*で設定）

左の要素

右の要素

htmlコード

<div class="box1">
<div class="box_left3">左の要素</div>
<div class="box_right3">右の要素</div>
</div>

cssコード

.box1{
  display: flex;
  max-width:100%;
  margin:0 auto 5%;
}
.box_left3 {
  width: 200px;
  text-align: center;
  color:#fff;
  background-color:#fa41a1;
}
.box_right3{
  width: calc(100px * 2);
  text-align: center;
  color:#fff;
  background-color:#fe80c1;
}

例（/で設定）

左の要素

右の要素

htmlコード

<div class="box1">
<div class="box_left4">左の要素</div>
<div class="box_right4">右の要素</div>
</div>

cssコード

.box1{
  display: flex;
  max-width:100%;
  margin:0 auto 5%;
}
.box_left4 {
  width: 200px;
  text-align: center;
  color:#fff;
  background-color:#fa41a1;
}
.box_right4{
  width: calc(100% / 2);
  text-align: center;
  color:#fff;
  background-color:#fe80c1;
}

「calc()」関数を利用して高さを計算式で指定する方法

ウェブデザインにおいて、要素の高さを指定することはよくありますが、これにはさまざまな課題が潜んでいます。
しかし、CSSの「calc()」関数を使用すると、高さを計算式で柔軟に指定でき、レスポンシブデザインをより効果的に実現できます。

「calc()」関数を利用して高さを計算式で指定する場合は「height」プロパティを用いて「calc()」関数を使用して高さを計算式で指定することができます。

例

※下のブロック要素に「height: 100vh」を指定すると、ヘッダーの高さ分、要素がビューポートから下側にはみ出てしまいますので「height: 100vh」にヘッダー分の高さを引きます。

左の要素

右の要素

htmlコード

<div class="box2">
<div class="box_left5">左の要素</div>
<div class="box_right5">右の要素</div>
</div>

cssコード

.box2{
  max-width:100%;
  margin:1% auto 5%;
}
.box_left5 {
  width:100%;
  height: 100px;
  text-align: center;
  color:#fff;
  background-color:#fa41a1;
}
.box_right5{
  width:100%;
  height: calc(100vh - 100px);
  text-align: center;
  color:#fff;
  background-color:#fe80c1;
}