CSSだけでここまでできる！JavaScript要らずになりつつある2026年の新機能まとめ

📖 推定読了時間：約7分

「この動き、CSSだけじゃ無理だからJavaScriptで書くしかないか」——フロントエンドの実装をしていて、そんな風に諦めた経験がある人は多いのではないでしょうか。親要素の状態に応じて子要素のスタイルを変えたり、スクロール量に合わせてアニメーションさせたり。少し前までは、こうした処理にはJavaScriptが必須というのが当たり前でした。

ところが2026年現在、かつてJavaScriptが必須だった処理の多くが、CSSだけで完結できるようになってきています。この記事では、実務で使える最新のCSS機能をいくつかピックアップし、何ができるようになったのかを紹介します。

ずっと待たれていた「親セレクタ」がついに実現

CSSには長らく「子要素の状態に応じて、親要素のスタイルを変える」という指定方法が存在しませんでした。それを可能にするのが:has()疑似クラスです。

/* 画像を含むカードだけレイアウトを変える */
.card:has(img) {
  grid-template-rows: 200px auto;
}

/* 入力エラーがあるフォームグループを強調表示 */
.form-group:has(input:invalid) {
  border-color: red;
}

これまでであれば、フォームの入力状態を監視してJavaScriptでクラスを付け替える、といった処理が必要になる場面です。:has()を使えば、そうした監視処理を書かずに、CSSの記述だけで同じ見た目を実現できます。

コンポーネント単位でレスポンシブができる「コンテナクエリ」

従来のメディアクエリは、画面全体（ビューポート）のサイズを基準にスタイルを切り替えるものでした。しかし、同じコンポーネントでも「サイドバーに置かれたとき」と「メインエリアに置かれたとき」では、必要なレイアウトが変わることがあります。

コンテナクエリは、親要素自体のサイズを基準にスタイルを切り替えられる機能です。コンポーネント単位で見た目を管理したい場合に非常に相性が良いとされています。

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

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

実はここがすごい：スクロール連動アニメーションもCSSだけで

スクロール量に応じて要素をアニメーションさせる、いわゆる「スクロールドリブンアニメーション」も、これまではJavaScriptでスクロール位置を監視しながら実装するのが一般的でした。

今ではanimation-timeline: scroll()を使うことで、JavaScriptを一切使わずにスクロール連動のアニメーションを実装できるようになっています。

@keyframes progress {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

.progress-bar {
  animation: progress auto linear;
  /* ドキュメント全体のスクロールに連動 */
  animation-timeline: scroll(root);
}

ページ上部の読了プログレスバーのような表現も、この機能を使えばスクロールイベントの監視処理なしで実現できます。パフォーマンス面でも、JavaScriptでスクロールイベントを都度処理するより有利になりやすいとされています。

ツールチップの配置に便利な「Anchor Positioning」

特定の要素（アンカー）を基準に、ツールチップやドロップダウンメニューを配置できる機能も登場しています。

.anchor-element {
  anchor-name: --my-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  /* アンカーの下側に配置 */
  position-area: bottom;
}

これまでライブラリに頼りがちだった「要素の位置を計算してツールチップを配置する」処理も、標準のCSSだけで完結できるようになりつつあります。

便利機能ほど、ブラウザ対応状況の確認を忘れずに

ここまで紹介した機能はどれも便利ですが、対応しているブラウザやバージョンは機能ごとに異なるため、実務で使う前には必ず対応状況を確認する必要があります。特に古いバージョンのブラウザを考慮する必要があるプロジェクトでは、フォールバック（代替表示）の用意も検討しましょう。

• ✅まずは対応状況の安定した機能（:has()やコンテナクエリなど）から既存プロジェクトに取り入れてみる
• ✅比較的新しい機能は、まずサイドプロジェクトや検証環境で試してみるのがおすすめ
• ⚠️対象ユーザーが古いブラウザを使う可能性がある場合は、フォールバックを必ず用意する

まとめ

2026年のCSSは、これまでJavaScriptに頼っていた処理の多くを、宣言的な書き方だけで実現できるように進化しています。:has()による親セレクタ、コンテナクエリ、スクロール連動アニメーション、Anchor Positioningなど、実務で役立つ機能が続々と登場してきました。

すべてを一気に取り入れる必要はありません。まずは対応状況が安定している機能から少しずつ試し、JavaScriptのコード量を減らせるところがないか、手持ちのプロジェクトを見直してみるとよいでしょう。