CSS

【2025年版】CSS最新機能まとめ｜clamp・subgrid・container queriesの使い方

✅ はじめに

CSSは年々進化を続けており、これまで JavaScriptや複雑なメディアクエリが必要だった表現 も、最新のCSS機能で実現できるようになってきました。

この記事では、2025年に注目すべき CSS最新機能 を3つ紹介します。

  • clamp() → 柔軟なサイズ指定
  • subgrid → ネストされたレイアウトをきれいに制御
  • container queries → 親要素に応じたレスポンシブデザイン

📌 1. clamp() 関数

🔹 clamp() とは？

clamp() は 最小値・推奨値・最大値を指定できる関数 です。
フォントサイズや幅の指定で特に役立ちます。

🔹 基本構文

font-size: clamp(16px, 2vw, 24px);
  • 16px → 最小値（これ以下にはならない）
  • 2vw → 推奨値（ビューポート幅に応じて変化）
  • 24px → 最大値（これ以上大きくならない）

👉 スマホでもPCでも 読みやすいサイズに自動調整 できます。

🔹 例：レスポンシブな見出し

h1 {
  font-size: clamp(24px, 5vw, 48px);
}

📌 2. subgrid（サブグリッド）

🔹 subgrid とは？

CSS Gridで 入れ子構造の要素を親のグリッドに揃える 機能です。
従来は「ネストすると整列が崩れる」という問題がありましたが、subgrid で解決します。

🔹 基本構文

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* 親のカラムを継承 */
}

👉 subgrid を指定すると、子要素のレイアウトが 親と同じカラム幅に揃う ようになります。

🔹 対応状況

2025年現在、Firefox・Safari・Chromium系（最新版） で利用可能。

📌 3. container queries（コンテナクエリ）

🔹 container queries とは？

従来の @media (max-width: …) は画面全体（ビューポート）に依存していました。

しかし、コンポーネントベース開発では
「親要素の幅に応じてスタイルを変えたい」
というニーズが増えています。

👉 それを実現するのが コンテナクエリ です。

🔹 基本構文

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

@container card (max-width: 400px) {
  .card-content {
    font-size: 14px;
  }
}
  • container-type: inline-size; → 親要素の幅を基準にする
  • @container card (max-width: 400px) → 親要素の幅が400px以下なら適用

👉 これで「カードコンポーネントの幅に応じたレスポンシブ」が可能に！

📌 まとめ

  • clamp() → フォントサイズや幅を「最小・推奨・最大」で柔軟に指定
  • subgrid → ネストしたレイアウトを親グリッドに揃えられる
  • container queries → 親要素に応じたレスポンシブデザインが可能

🎯 初心者がまず使うべき機能は？

  1. clamp() → 簡単に導入できて効果が大きい
  2. container queries → コンポーネントベース開発に必須
  3. subgrid → 複雑なレイアウトを扱うときに便利

👉 特に clamp() と container queries は、2025年以降のCSS設計で必須級の機能です。

おすすめ記事

-CSS