7個のプロパティ
コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}最小値、推奨値、最大値を指定してレスポンシブな値を設定する関数です。clamp(最小, 推奨, 最大)の形式で、ビューポートに応じて値が自動調整されます。フルードタイポグラフィやスペーシングの実装に最適です。
font-size: clamp(1rem, 4vw, 3rem);複数の値から最小値または最大値を選択する関数です。レスポンシブデザインで条件分岐的な値設定が可能です。
width: min(100%, 600px);線形グラデーションを作成する関数です。方向と色を指定し、滑らかな色の変化を表現できます。角度や方向キーワード（to top、to right等）で方向を制御でき、モダンなデザインに欠かせません。
background: linear-gradient(to right, #ff6b6b, #4ecdc4);円形・楕円形のグラデーションを作成する関数です。中心からの放射状グラデーションで、位置、形状、色の配分を細かく制御できます。背景やボタンに立体感を与えるデザインに使用されます。
background: radial-gradient(circle, #ff6b6b, #4ecdc4);ユーザーのシステム設定がライトモードかダークモードかを検出するメディアクエリです。
@media (prefers-color-scheme: dark) { body { background: black; } }ユーザーがアニメーションを減らす設定を有効にしているかを検出するメディアクエリです。アクセシビリティ向上に重要です。
@media (prefers-reduced-motion: reduce) { * { animation: none; } }