リキッドレイアウトとは？ CSSでrem・vw・clamp()を使って実装する方法

レスポンシブ対応は「画面サイズごとにレイアウトを切り替える」考え方です。
一方、リキッドレイアウトは、画面幅に合わせて要素の幅・余白・文字サイズを“なめらかに変化”させる考え方になります。

文字サイズや余白はclamp()でなめらかに変えられます。ただし、WebCantaでは本文とサイドバーのように構造が変わる部分にはメディアクエリも使っています。

最初にhtmlの基準サイズを決め、次にコンテナ、余白、見出しの順で確認すると整理しやすくなります。この記事ではWebCantaの実際の数値を使って説明します。