問題
2calcとは？余白込みレイアウトを作ろう
「要素の幅から余白分だけ引きたい」「画面サイズに合わせて柔軟にレイアウトを調整したい」と悩んでいませんか？そんなときに便利なのが、CSSのcalc()関数です。calcとは、異なる単位同士を計算しながら値を指定できる機能のことです。この問題ではcalcの使い方を学びながら、実務でもよく使われる余白込みのカラムレイアウトを作成できるようになりましょう。
【CSS】calcとは？計算式で値を指定する方法
【CSS】calcとは？基本的な使い方
calc()は、CSSで計算式を利用して値を指定できる関数です。通常のCSSでは固定値や割合をそのまま指定しますが、calc()を使うことで異なる単位同士を組み合わせた計算ができます。基本構文は以下のようになります。
width: calc(100% - 80px);
例えば親要素の幅いっぱいから80pxだけ引いたサイズを指定したい場合に便利です。レスポンシブ対応や余白を考慮したレイアウト作成など、実務でも頻繁に利用されています。
【CSS】calcで異なる単位を計算する方法
calc()は、割合（%）と固定値（px）を組み合わせてサイズを指定できる関数です。例えば次のように記述できます。
width: calc(100% - 16px);
このように指定すると、「親要素の幅」から「16px」を引いた値が自動的に計算されます。通常は計算が難しいレイアウトでも、calc()を使うことで柔軟にサイズ調整ができます。今回の問題でも、要素の幅と余白を両立させるためにcalc()を活用していきます。
【CSS】calcで余白込みカラムレイアウトを作ろう
問題
「calcとは？余白込みレイアウトを作ろう」
calc()を使って、要素同士の間に8pxの余白を入れたカラムレイアウトを作成してみましょう。今回は、class="wrapper"にwidth:300pxの制約が設定されています。この300pxの中で、見本のように四角要素の間だけに8pxの余白が入るよう調整してください。2カラム・3カラムが折り返されないよう配置しながら、calc()を使った幅の計算方法と余白を考慮したレイアウト設計を学びましょう。
あらかじめエディタに書くコード
<section class="column column--two">
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
<section class="column column--three">
<div class="column__cat"></div>
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
¥HTML¥
.wrapper {
width: 300px;
margin: auto;
}
.column{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 24px;
}
.column__cat {
width: 100px;
height: 100px;
border: 1px solid;
background: red;
box-shadow: 10px 10px 15px -10px;
}
¥CSS¥
期待する画面
解答と解説（calcとは？余白込みレイアウトを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回のポイントは、calc()を使って「要素の幅」と「余白」を両立させることです。wrapperクラスには幅300pxの制約が設定されているため、単純に2カラムなら50%、3カラムなら33.3%の幅を指定しただけでは、margin分のサイズが加算されて要素が横幅に収まらなくなってしまいます。その結果、3カラムの要素の一部が下の行へ折り返されてしまいます。
そこで使用するのがCSSのcalc()関数です。.column--twoの.column__catには「width: calc(50% - 8px);」を指定し、親要素の50%から余白分の8pxを引いています。これにより、余白を確保しながら2カラムを綺麗に配置できます。
また、3カラムの場合は「width: calc((100% / 3) - 8px);」を指定します。calc()は足し算や引き算だけでなく割り算も利用できるため、「親要素を3等分した幅」から余白分を引くことが可能です。これによって、要素が折り返されることなく横一列に並びます。
さらに、今回の要件は「四角要素の間だけに余白を作ること」です。そのため、最後の要素までmargin-right: 8px;を適用すると右端にも余白ができてしまいます。そこでを使用して最後の要素のmarginを0にすることで、要件通りのレイアウトを実現しています。
calc()は、画面幅から固定値を引いたり、複数カラムの幅を均等に計算したりする場面で実務でも頻繁に利用されます。特にレスポンシブデザインでは欠かせない関数なので、この機会に基本的な使い方をしっかり覚えておきましょう。
補足
calc()は、画面幅や親要素のサイズに応じて動的に値を計算できる便利な関数です。例えば「画面幅いっぱいから100pxだけ引いたサイズにしたい」といった場合でも、width: calc(100% - 100px); のようにシンプルに指定できます。また、今回のように割り算や括弧を組み合わせることで、複数カラムの幅を自動計算することも可能です。
一方で、calc()は演算子（+、-）の前後に半角スペースが必要です。スペースがないとCSSが正しく解釈されず、calc()が効かない原因になるため注意しましょう。レスポンシブデザインやレイアウト調整で活躍する重要な関数なので、この機会に基本的な使い方をしっかり身につけておくのがおすすめです。
・レイアウト関連：複数カラムのボックスを作成しよう
・サイズ指定関連：最低の幅を担保しよう
・問題集一覧：HTML/CSS問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
【CSS】calcの仕組みと実務で使うポイント
calc()で余白込みの幅を計算する仕組み
calc()は、ブラウザが画面サイズや親要素の幅をもとにリアルタイムで計算を行うCSS関数です。例えば「100% - 8px」のように指定すると、親要素の幅から余白分を差し引いた値が自動的に適用されます。そのため、画面サイズが変わってもレイアウトが崩れにくく、レスポンシブデザインとの相性も抜群です。固定値だけでは対応しづらいレイアウト調整を柔軟に行えるのが、calc()が実務で多く利用される理由です。
calc()が効かない原因と対処法
calc()が反映されない場合は、演算子の前後に半角スペースが入っているか確認しましょう。例えば「calc(100%-8px)」は正しく動作しませんが、「calc(100% - 8px)」であれば正常に計算されます。また、複雑なレイアウトやレスポンシブ対応ではcalc()を活用する場面が多くあります。
独学でレイアウト設計に悩んだ場合は、下部の学習コンテンツやメンター相談も活用しながら理解を深めてみてください。
