レスポンシブ・関数

10個のプロパティ

@container

レスポンシブ・関数

コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。

Example

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

clamp()

レスポンシブ・関数

最小値、推奨値、最大値を指定してレスポンシブな値を設定する関数です。clamp(最小, 推奨, 最大)の形式で、ビューポートに応じて値が自動調整されます。フルードタイポグラフィやスペーシングの実装に最適です。

Example

font-size: clamp(1rem, 4vw, 3rem);

min() / max()

レスポンシブ・関数

複数の値から最小値または最大値を選択する関数です。レスポンシブデザインで条件分岐的な値設定が可能です。

Example

width: min(100%, 600px);

linear-gradient()

レスポンシブ・関数

線形グラデーションを作成する関数です。方向と色を指定し、滑らかな色の変化を表現できます。角度や方向キーワード（to top、to right等）で方向を制御でき、モダンなデザインに欠かせません。

Example

background: linear-gradient(to right, #ff6b6b, #4ecdc4);

radial-gradient()

レスポンシブ・関数

円形・楕円形のグラデーションを作成する関数です。中心からの放射状グラデーションで、位置、形状、色の配分を細かく制御できます。背景やボタンに立体感を与えるデザインに使用されます。

Example

background: radial-gradient(circle, #ff6b6b, #4ecdc4);

@media (prefers-color-scheme)

レスポンシブ・関数

ユーザーのシステム設定がライトモードかダークモードかを検出するメディアクエリです。OSのテーマ設定に合わせてサイトの配色を自動で切り替えたい場合に使用します。

Example

@media (prefers-color-scheme: dark) { body { background: black; } }

@media (prefers-reduced-motion)

レスポンシブ・関数

ユーザーがアニメーションを減らす設定を有効にしているかを検出するメディアクエリです。アクセシビリティ向上に重要です。

Example

@media (prefers-reduced-motion: reduce) { * { animation: none; } }

color-mix()

レスポンシブ・関数

2つの色を指定した比率で混ぜた色を生成するCSS関数です。ベース色から明るい色・暗い色・半透明色をCSSだけで派生でき、SassのdarkenやJavaScriptでの色計算を置き換えられます。CSS変数と組み合わせるとテーマ設計が大幅に簡潔になります。

Example

:root {
  --primary: #2563eb;
}

.button:hover {
  background: color-mix(in oklch, var(--primary), black 15%);
}

light-dark()

レスポンシブ・関数Baseline 新しく利用可能

ライトモード用とダークモード用の2色を1行で指定できるCSS関数です。メディアクエリで変数を二重定義する従来のダークモード実装を大幅に簡潔にできます。使用にはcolor-scheme: light darkの指定が必須です。

Example

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#333, #eee);
  background: light-dark(#fff, #1a1a1a);
}

oklch()

レスポンシブ・関数

人間の知覚に基づくOKLCH色空間で色を指定する関数です。明度（L）・彩度（C）・色相（H）で直感的に色を操作でき、明度を変えても見た目の明るさが揃うためカラーパレット設計に最適です。Display P3などの広色域も表現できます。

Example

.button {
  background: oklch(0.65 0.2 250);
}