【CSS】calcの使い方

calc()とは？

• cssで数値計算を行うための関数
• 異なる単位の値を組み合わせたり、動的に計算された値をスタイル適切に活用することで、柔軟なレスポンシブなデザインを実現することが可能
• 加算、減算、乗算、除算式で指定できる

使い方

コンテナ幅が、親要素の幅から50ピクセル引いた値になる

index.css

.container {
  width: calc(100% - 50px);
}

使用例

下記ではカードをレスポンシブ対応の表示例です

index.html

<div class="container">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
    <div class="card">カード3</div>
    <div class="card">カード4</div>
    <div class="card">カード5</div>
    <div class="card">カード6</div>
</div>

index.css

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
    box-sizing: border-box;
}
.card {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    /* 幅を画面幅の割合として計算 */
    width: calc(33.33% - 20px);
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .card {
        width: calc(50% - 20px);
    }
}
@media (max-width: 480px) {
    .card {
        width: calc(100% - 20px);
    }
}

参考資料