【2026年版】CSS最新機能まとめ - 今すぐ使える新プロパティ

注目のCSS新機能

最近使えるようになったCSSの便利な機能をまとめました。

---

1. Container Queries

親要素のサイズに応じてスタイルを変える。

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

.card {
  display: flex;
  flex-direction: column;
}

/* コンテナが400px以上なら横並び */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

メディアクエリとの違い:

• メディアクエリ: ビューポート基準
• Container Queries: 親要素基準

コンポーネント単位でレスポンシブ対応できます。

---

2. :has() セレクタ

子要素の状態で親をスタイリング。

/* チェックされたラベルの背景を変える */
label:has(input:checked) {
  background: #e0f2fe;
}

/* 画像がある記事カード */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* エラーがあるフォーム */
form:has(.error) {
  border-color: red;
}

「親セレクタ」として長年待ち望まれていた機能。

---

3. CSSネスト

Sassのようにネストが書ける。

.card {
  padding: 1rem;
  background: white;

  /* 子要素 */
  & h2 {
    font-size: 1.5rem;
  }

  & p {
    color: #666;
  }

  /* ホバー */
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* メディアクエリもネスト可能 */
  @media (max-width: 768px) {
    padding: 0.5rem;
  }
}

Sass不要でネストが使えます。

---

4. Subgrid

子要素が親のグリッドを継承。

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
}

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

カード内のレイアウトを揃えるのに便利。

---

5. color-mix()

色を混ぜる。

.button {
  background: blue;
}

.button:hover {
  /* 青を白と50%混ぜる（明るくなる） */
  background: color-mix(in srgb, blue 50%, white);
}

.button:active {
  /* 青を黒と30%混ぜる（暗くなる） */
  background: color-mix(in srgb, blue 70%, black);
}

ホバー色を計算で出せます。

---

6. oklch() / oklab()

より直感的な色指定。

.text {
  /* oklch(明度, 彩度, 色相) */
  color: oklch(50% 0.2 240); /* 青 */
}

/* 色相だけ変えて色違いを作る */
.red    { color: oklch(60% 0.2 30); }
.green  { color: oklch(60% 0.2 140); }
.blue   { color: oklch(60% 0.2 240); }

明度を揃えたカラーパレットが作りやすい。

---

7. text-wrap: balance

テキストの折り返しを均等に。

h1 {
  text-wrap: balance;
}

見出しの行の長さが揃って見やすくなります。

---

8. scroll-timeline（実験的）

スクロール量でアニメーション。

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fade-in linear;
  animation-timeline: scroll();
}

スクロールに連動したアニメーションが作れます。

---

ブラウザ対応状況

機能	Chrome	Firefox	Safari	Edge
Container Queries	✅	✅	✅	✅
:has()	✅	✅	✅	✅
ネスト	✅	✅	✅	✅
Subgrid	✅	✅	✅	✅
color-mix()	✅	✅	✅	✅
oklch()	✅	✅	✅	✅
text-wrap: balance	✅	✅	✅	✅

---

まとめ

特に便利な機能:

1. :has() - 親セレクタとして革命的
2. Container Queries - コンポーネント単位のレスポンシブ
3. ネスト - Sassなしで書ける
4. color-mix() - ホバー色の計算が楽

もうほとんどのブラウザで使えるので、積極的に使っていきましょう。