【2025年最新版】JavaScript不要？Web制作で注目のCSS新機能4選を徹底解説

このデザイン、CSSだけじゃ無理かも…
結局またJavaScriptで書かないといけないのか…

このような悩みを抱えた経験、ありませんか？

ポップアップの表示、スクロール連動アニメーション、状態に応じたデザイン変更など、Web制作の多くの場面でJavaScriptが必須とされてきました。

しかし、2025年以降のCSSは大きく進化しています。これまでJavaScriptに依存していた表現の多くが、CSSだけでシンプルかつ高速に実装できるようになってきたのです。

本記事では、2025年のWeb制作で注目のCSS新機能4選について、それぞれの使い方と活用例を解説します。

※本記事の内容は2025年6月19日時点のものです。本記事で紹介したツール・機能を利用する際には、必ず最新情報をご確認ください。

■動画で内容を確認したい方はこちら！

【講師プロフィール】
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。

1. 2025年のWeb制作で注目されるCSS新機能4選
2. まとめ：2025年以降のWeb制作に欠かせないCSS新機能を先取りしよう
3. 未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！

2025年のWeb制作で注目されるCSS新機能4選

2025年のWeb制作で注目すべきCSSの新機能は次の4つです。

:has()の擬似クラス
スクロールアニメーション
View Transitions API
anchor

1：:has()の擬似クラス

従来のCSSでは、子要素に応じて親要素のスタイルを変更することができませんでした。

これを可能にするのが、:has()擬似クラスです。

役立つ場面

・画像を含むカードだけデザインを変えたい
・入力エラーがあるフォームだけ全体を強調したい
・子要素の状態に応じて、親要素の見た目を変えたい

従来はJavaScriptで条件を監視して、クラスを追加・削除していましたが、:has()を使えばCSSだけで条件分岐のスタイリングが可能です。

例1：画像を含むカードだけデザインを変える

画像を含むカードだけデザインを変更したい場合は、次のように表現します。

.card:has(img) {
border: 2px solid green;
}

この指定により、画像 <img> を含む .card 要素だけに枠線と背景色が付きます。

例2：エラーのあるフォームに強調スタイル

入力エラーのあるフォームに強調スタイルをつけたい場合は、次のように表現します。

.form-group:has(input:invalid) {
background-color: #ffe0e0;
border: 1px solid red;
}

たとえば、メールアドレス欄が空欄のときは赤く強調され、正しく入力されると自動で元のスタイルに戻るといったような動作をCSSだけで実現できます。

:has()はすでに多くのブラウザで導入できるため、子要素の状態を見て親要素のスタイルをあてたい場合に活用してみてください。

2：スクロールアニメーション

フェードインやスライドインなど、スクロールと連動するアニメーションはユーザー体験を向上させる定番表現です。

これまでは「Intersection Observer」などJavaScriptを使った実装が主流でしたが、CSSの新機能 animation-timeline によって、JavaScriptなしでスクロールに連動したアニメーションが実現可能になりました。

animation-timeline とは？
・view-timeline：スクロールの進行をタイムラインとして定義する
・animation-timeline：その進行度に応じたCSSアニメーションを適用する

例1：スクロールで要素がフェードイン

スクロールで要素がフェードインする場合のコードは次のとおりです。

.box {
view-timeline: –boxTimeline;
animation-timeline: –boxTimeline;
animation-range: entry 50% contain 20%;
}

@keyframes slide-in {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

この設定で、要素が画面に50%入ったあたりから、滑らかにフェードインします。

例2：スクロールに応じてプログレスバーを伸ばす

ページの進行状況を示すプログレスバーを表現するコードは次のとおりです。

scroll-demo-container {
height: 300px;
overflow-y: scroll;
background: #f1f5f9;
scroll-timeline: –boxTimeline y;
}

.progress-bar-box {
animation-name: progressBar;
animation-timeline: –boxTimeline;
}

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

JavaScriptを使わないことでコードがシンプルになり、パフォーマンス向上にも貢献します。

現時点ではブラウザ対応が一部に限られますが、今後の標準化が期待される機能です。

ウィンドウ全体のスクロールに対してバーを動かしたい場合は、animation-timelineでエリアを指定せず、あらかじめ用意されている scroll(root)をそのまま活用してください。

3：View Transitions API

ページを切り替えるとき、画面が一瞬で切り替わってしまうと、やや唐突で機械的な印象になることがあります。

View Transitions APIを使えば、前の画面がフェードアウトしながら新しい画面がスムーズに表示されるなど、滑らかで心地よい画面遷移をCSSとJavaScriptの連携で実現できます。

たとえば、あるページから別のページに移動する際、前の要素がスーッと消えて、次の要素がふわっと表示されるといった表現も可能です。

CSSは次のように表記します。

::view-transition-old(view-content) {
animation: fade-out 0.3s ease-out forwards;
}

::view-transition-new(view-content) {
animation: fade-in 0.3s ease-in forwards;
}

@keyframes fade-out {
from { opacity: 1; transform: translate 0 0); }
to { opacity: 0; transform: 0 100%; }
}

@keyframes fade-in {
from { opacity: 0; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}

JavaScriptは、次のとおりに表記します。

const viewContent = document.querySelector(‘.view-content’);
const btnA = document.querySelector(‘#view-btn-a’);
const btnB = document.querySelector(‘#view-btn-b’);

btnA.addEventListener(‘click’, () => {
if (viewContent.textContent !== ‘画面Aの内容’) {
document.startViewTransition(() => {
viewContent.textContent = ‘画面Aの内容’;
});
}
});

Atnb.addEventListener(‘click’, () => {
if (viewContent.textContent !== ‘画面Bの内容’) {
document.startViewTransition(() => {
viewContent.textContent = ‘画面Bの内容’;
});
}
});

これで、「Aの画面のあとにBの画面が滑らかに現れる」といった表現が実現できます。

こちらはまだすべてのブラウザでサポートされているわけではありません。
今後の動向を確認しながら取り入れていきましょう。