height:autoにアニメーションできる時代へ｜calc-size()とinterpolate-size完全解説

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「アコーディオンの開閉、なんか不自然じゃない？」

こんな違和感、感じたことありませんか？

一瞬でパッと開く
カクカク動く
高さが固定されていて気持ち悪い

その原因はこれです。

height: auto はアニメーションできない

これが、長年Web制作の中で
ずっと立ちはだかっていた壁でした。

だから昔はどうしていたか。

正直、どれも「無理やり」です。

でも2026年。

この問題、ついにCSSだけで解決できます。

それが今回の主役、

この2つです。

この記事では、
小学生でも理解できるように、
「なぜ動かなかったのか」から
「どうやって動くようになったのか」まで
具体例たっぷりで解説します。

読み終わる頃には、
“自然に開くUI”を自分で作れるようになります。

---

結論：autoを“計算できる値”に変えれば動く

これがすべてです。

「autoをそのまま使うな」が答えです。

---

なぜheight:autoは動かなかったのか？

理由はシンプル

CSSアニメーションは、
「数字」と「数字」の間を計算して動きます。

例えばこうです。

でも、

なぜか？

autoは“結果”であって“数値”ではないからです。

イメージで理解する

途中が作れないから、アニメーションできないというわけです。

---

calc-size()とは？autoを数値に変える魔法

一言でいうと

「autoを計算可能なサイズに変換する関数」です。

基本コード

.element { 
 height: calc-size(auto); 
 transition: height 0.3s; 
} 

これだけで、

height:autoがアニメーション可能になります。

アコーディオン例

.content { 
 height: 0; 
 overflow: hidden; 
 transition: height 0.4s ease; 
} 
 .content.open { 
height: calc-size(auto); 
} 

これで、

気持ちいい動きが実現します。

JavaScript不要の時代です。

---

interpolate-sizeとは？アニメーションの精度を上げる

これも一言で

「サイズの変化をどう補間するかを指定するプロパティ」です。

コード

.element { 
 interpolate-size: allow-keywords; 
} 

何が変わるのか？

これを使うと、

“いい感じに動かす”をCSSに任せられるようになります。

---

実務での最強パターン

これをコピペでOK

.accordion-content { 
 height: 0; 
 overflow: hidden; 
 transition: height 0.4s ease; 
 interpolate-size: allow-keywords; 
} 
.accordion-content.is-open { 
 height: calc-size(auto); 
} 

これが2026年の正解テンプレです。

使えるシーン

---

よくある落とし穴

まとめ

“気持ちいいUI”は、細かい動きで決まります。

これからのWebデザインは、
見た目だけでなく「動きの質」が重要になります。

今回のテクニックは、
すぐに実務で使えるレベルです。

ぜひ次の案件で試してみてください。

 

satokotadesignキャンペーン実施中！