5個のプロパティ
コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}最小値、推奨値、最大値を指定してレスポンシブな値を設定する関数です。フルードタイポグラフィに最適です。
font-size: clamp(1rem, 4vw, 3rem);複数の値から最小値または最大値を選択する関数です。レスポンシブデザインで条件分岐的な値設定が可能です。
width: min(100%, 600px);線形グラデーションを作成する関数です。モダンなデザインに欠かせません。
background: linear-gradient(to right, #ff6b6b, #4ecdc4);円形・楕円形のグラデーションを作成する関数です。
background: radial-gradient(circle, #ff6b6b, #4ecdc4);