CSS - calc-size()

• トップ
• CSSリファレンス
• calc-size()

概要

説明

通常、auto, min-content, max-content などのキーワードを用いた長さには calc() による計算や、トランジションを適用することはできませんでしたが、calc-size() によって計算したりトランジションを適用することができます。これまで高さが不明なアコーディオンをトランジション付きで開閉するには JavaScript を用いたり、グリッドを使用したトリッキーな実装しかできませんでしたが、calc-size() により CSS のみで不定サイズのアコーディオンが可能となります。

第一引数には計算の元となる長さを指定します。

auto

コンテンツを普通に表示した場合の高さ(または横幅)を示します。

min-content

コンテンツを最小の横幅(または高さ)で表示した場合のサイズになります。例えば横書きテキストの幅の場合は最も長い単語の横幅になります。

max-content

コンテンツを最大の横幅(または高さ)で表示した場合のサイズになります。例えば横書きテキストの幅の場合は文章を改行無しで表示した場合の横幅になります。

fit-content

コンテンツを最大の横幅(または高さ)で表示した場合のサイズになります。ただし、親要素の横幅(または高さ)を超えることはありません。

content

flex-basis を使用したコンテナの場合に有効で、フレックスアイテムのコンテンツに応じて自動計算されたサイズになります。

calc-sum

第一引数に、第二引数のような計算式を記述することもできます。

第二引数では、第一引数の値を size として受け取り、calc() が行うような計算を行います。例えば、下記の例ではコンテンツを通常通りに表示した場合の高さの2倍の高さを指定することになります。

height: calc-size(auto, size * 2);

interpolate-sizeとの使い分け

calc-size() と類似のプロパティに interpolate-size があります。interpolate-size を用いても auto 等に対するトランジションは有効になりますが、下記のような計算を行うことはできません。計算が不要であれば interpolate-size、計算が必要であれば calc-size() の使い分けでよいかと思います。

height: calc(auto + 3rem); /* 計算できない */

使用例

CSS のみを使用して実現する任意高さのアコーディオンの例を示します。コンテンツ部分の高さは通常時は 0、チェックボックスがオンの時は auto になり、これに対してトランジションが効きます。calc-size() 未サポートブラウザのために、height: auto を指定しています。

.my-accordion {
  border: 1px solid #ccc;
  padding: .2rem;
  background-color: #fff;
  .my-accordion-content {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
    padding-left: 1rem;
  }
  [type="checkbox"]:checked ~ .my-accordion-content {
    height: auto; /* for unsupported browser */
    height: calc-size(auto, size);
  }
}

<div class="my-accordion">
  <input type="checkbox" id="cb1"><label for="cb1">アコーディオン</label>
  <div class="my-accordion-content">
    <div>AAA</div>
    <div>AAA</div>
    <div>AAA</div>
    <div>AAA</div>
    <div>AAA</div>
    <div>AAA</div>
  </div>  
</div>

関連項目

リンク

• https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size
• https://drafts.csswg.org/css-values-5/#calc-size
• https://caniuse.com/mdn-css_types_calc-size