【2026年版】もう使えるモダンCSS新機能まとめ｜実装が変わる注目の機能

昔はJavaScriptやSassがないとできなかったことが、CSSでできるようになってきています。

親要素を選べる:has()や、コンポーネント単位でレイアウトを変えるコンテナクエリなど、実装のやり方が根本から変わる機能が続々と使えるようになっています。

この記事では、2026年のいま押さえておきたいモダンCSSの新機能を、短いコード例つきでまとめて紹介します。

この記事の対象読者

• コーダー・Web制作者で、最近のCSS事情を追いきれていない方
• JavaScriptやSassに頼っていた処理を、CSSだけで済ませたい方
• 「名前は聞くけど使ったことがない」機能を整理したい方

なぜ今「モダンCSS」なのか

大きな理由は、主要ブラウザの足並みがそろってきたことです。

近年は「Baseline」という指標で、どの機能が広く安全に使えるかが分かりやすくなりました。

これから紹介する機能の多くは、モダンブラウザで実用段階に入っています。

注目のモダンCSS新機能

①:has()｜ついに使える「親セレクタ」

長年CSSにはなかった「親を選ぶ」書き方が、:has()で実現しました。

特定の子要素を持つ親だけにスタイルを当てられます。

/* 画像を含むカードだけ枠線をつける */
.card:has(img) {
  border: 1px solid #ccc;
}

/* 画像を含むカードだけ枠線をつける */
.card:has(img) {
  border: 1px solid #ccc;
}

②コンテナクエリ｜「画面幅」ではなく「親の幅」で分岐

従来のメディアクエリは画面幅で判断していましたが、コンテナクエリはそのコンポーネントが置かれた親要素の幅で切り替えられます。

同じ部品をどこに置いても、その場に合わせて自動で最適化できます。

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

@container (min-width: 400px) {
  .card__title { font-size: 1.5rem; }
}

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

@container (min-width: 400px) {
  .card__title { font-size: 1.5rem; }
}

③ネイティブCSSネスト｜Sassなしで入れ子が書ける

これまでSassなどが必要だった入れ子（ネスト）が、CSS単体で書けるようになりました。

.card {
  padding: 1rem;

  & .title { font-weight: bold; }
  &:hover { background: #f5f5f5; }
}

.card {
  padding: 1rem;

  & .title { font-weight: bold; }
  &:hover { background: #f5f5f5; }
}

④カスケードレイヤー（@layer）｜優先順位を整理する

@layerを使うと、スタイルの適用順（優先順位）をレイヤー単位でコントロールできます。

「詳細度の戦い」に悩まされにくくなるのが利点です。

@layer base, components, utilities;

@layer base {
  a { color: blue; }
}

@layer base, components, utilities;

@layer base {
  a { color: blue; }
}

⑤@property｜カスタムプロパティに「型」を与える

@propertyで、CSS変数に型や初期値を指定できます。

これにより、これまで難しかった変数のアニメーションなども扱いやすくなります。

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

⑥text-wrap: balance / pretty｜見出しや本文の改行を美しく

見出しの折り返しを整えるbalance、本文の泣き別れを減らすprettyで、文字組みが一段ときれいになります。

h1 { text-wrap: balance; }
p  { text-wrap: pretty; }

h1 { text-wrap: balance; }
p  { text-wrap: pretty; }

⑦light-dark()｜ダークモード対応がぐっと手軽に

light-dark()を使うと、1つのプロパティにライト用・ダーク用の色をまとめて書けます。

:root { color-scheme: light dark; }

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

:root { color-scheme: light dark; }

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

⑧@scope｜スタイルの適用範囲を絞る

@scopeで、スタイルが効く範囲をピンポイントに限定できます。

コンポーネント単位のスタイル管理が、CSSだけでやりやすくなります。

@scope (.card) to (.card__footer) {
  a { color: hotpink; }
}

@scope (.card) to (.card__footer) {
  a { color: hotpink; }
}

さらに新しい「これから」の機能

加えて、実装が進みつつある新しい機能もあります。

スクロール量に連動して動くスクロール駆動アニメーションや、要素を別の要素に紐づけて配置するアンカーポジショニングなどです。

これらは比較的新しいため、使う前に対応ブラウザを必ず確認しておきましょう。

使う前に確認したいこと

便利な新機能ほど、対応状況の確認が欠かせません。

「Baseline」や「Can I use」で、ターゲットとするブラウザが対応しているかをチェックしましょう。

必要に応じて、@supportsで対応・非対応を出し分けるなどの備えをしておくと安心です。

まとめ

いまのCSSは、「JavaScriptやSassがないとできなかったこと」が、CSSだけで書ける時代に入っています。

まずは:has()やコンテナクエリ、ネストなど、使えるものから少しずつ取り入れてみましょう。

対応状況だけ確認すれば、あなたのコードはもっとシンプルで強くなります。

よくある質問

古いブラウザでも使えますか？

機能によります。多くはモダンブラウザで使えますが、古い環境では動かないこともあります。BaselineやCan I useで対応状況を確認し、必要なら@supportsでフォールバックを用意しましょう。

もうSassは使わなくていいのですか？

ネストや変数などはCSSだけでも書けるようになりました。とはいえSassには関数やmixinなど独自の便利機能もあるため、用途に応じて使い分けるのがおすすめです。

メディアクエリはもう不要になりますか？

不要にはなりません。画面全体のレイアウトはメディアクエリ、部品単位の調整はコンテナクエリ、というように役割で使い分けると効果的です。

「Baseline」とは何ですか？

主要ブラウザで広く使えるようになった機能を示す指標です。ある機能がBaselineに入っていれば、比較的安心して本番で使える目安になります。

何から使い始めるのがおすすめですか？

対応が進んでいて効果を実感しやすい:has()、コンテナクエリ、ネイティブネストあたりから始めるのがおすすめです。小さな部分から少しずつ取り入れてみましょう。

参考リンク

• web.dev「Baseline」
• Can I use（ブラウザ対応状況の確認）
• MDN Web Docs「CSS」