本記事では、2025年6月10日に開催されたオンラインイベント「鹿野さんに聞くCSSの最新トレンド Ver.2025」の内容をお届けします。同セッションでは、2023年に引き続き、2024年もご好評いただいたUbie株式会社の鹿野 壮（@tonkotsuboy_com）さんをお招きし、2025年の最新CSSトレンドについてお話いただきます。ぜひ本編のアーカイブ動画とあわせてご覧ください。
鹿野：
鹿野と申します。CSSと猫が大好きで、@tonkotsuboy_comという名前でXをやっていますので、よろしくお願いします。本日は、教材をデザイナーの松下さんに協力していただき、いくつかのCSSを紹介していきます。比較的、最近全ブラウザで対応できるようになったCSSを中心に話していこうと思います。
早速ですが、新しいCSSが日々生まれています。どうして私たちは新しいCSSを学ぶのでしょうか。学ぶメリットとしては以下があります。
・長いJavaScriptで実現していたものが短いCSSで済む
・読みやすいコードになり、開発者体験（DX）が向上する
・バグが減り、成果物の品質が向上する
それでは、2025年最新CSS実践テクニックをご紹介します。
2025年最新CSS実践テクニック
selectの中で区切り線を表示したい
まず1つ目は、<select>の中で区切り線を表示する<hr>タグの活用です。都道府県のセレクトボックスを表示していますが、福島県と茨城県の間や神奈川県と新潟県の間に区切り線が表示されているのが見えますか。このようにセレクトボックスの中に区切り線を表示することができます。
これまでは区切り線を付けることができなかったので、長い都道府県が並んでいました。例えば、私は福岡県出身なので、リストの下の方にあり、注視しながら探す必要がありました。しかし、セレクトボックスの中に<hr>タグを設定することで、都道府県や地域ごとに区切ることができるため、探しやすくなり非常に便利です。
ちなみに<hr>タグを使わずとも、<optgroup>は昔から使えました。
例えば<optgroup>で、「東北地方」「関東地方」といったラベルを付け、その中に各都道府県のオプションをカテゴリー分けする手法は昔からありました。なので、世の中のフォームを作る皆様には、このセレクトボックスの中の<hr>か<optgroup>を使って、作っていただければと思います。
ちなみにこの<hr> in <select>のブラウザ対応は、去年1月にFirefox 122が対応したことで、全ブラウザで使えるようになりました。
1行で垂直方向中央揃え、FlexboxやGridなし
2つ目のデモはalign-content in ブロックレイアウトです。これは、FlexboxやGridを使わずに、1行のCSSで垂直方向の中央揃えを実現する方法です。
ボックス内のコンテンツを縦方向の垂直揃えにしたい時、皆さんは今までどうしていましたか。これまではdisplay: gridやdisplay: flexとalign-items: center;またはalign-content: center;などを使って縦方向の中央揃えにしていました。
しかし、今はalign-content: center;だけで、GridもFlexboxも不要です。消しても、ちゃんと今まで通りalign-content: center;になっています。非常に手軽に実現することができるようになりました。
ちなみに、align-content: end;に設定すれば、コンテンツは下寄せになります。複数の要素がある場合も同様で、align-content: center;だけで、ボックス内にコンテンツが2つあってもすべての要素がまとめて中央に揃います。
align-content: space-between;も試しましたが、これは均等配置されません。FlexboxやGridを使う場合と異なり、space-betweenを付けても均等配置されないので、垂直方向の中央揃えをしたい時にはalign-content: start;やalign-content: end;を使うと良いでしょう。
Display指定しなくて良くなった理由ですが、Display Blockの要素に対してalign-contentで中央揃えなどができるよう、各ブラウザが対応したためです。去年3月か4月に各ブラウザが一斉に対応し、Firefox 125が対応したことによって全ブラウザ対応になりました。
-webkit-が最近とれたシリーズ
次に、最近-webkit-のプレフィックスが不要になった機能の1つ、backdrop-filterを簡単に説明します。backdrop-filterは使ったことがある方もいると思いますが、背景にフィルター効果を適用するCSSプロパティです。
例えばnotificationというクラスにbackdrop-filterでblurをかけると、ぼかし効果ができます。ぼかしを外すとただの半透明ですが、backdrop-filterでblurをかけると、ぼかしがかかりガウス効果のような見た目になります。以前は-webkit-のベンダープレフィックスを付けていましたが、最近ではプレフィックスなしで全ブラウザで動作するようになりました。
ダイアログの背景にもbackdrop-filterを使うことができます。ダイアログの背景もbackdropで指定でき、blur 12pxなどを適用することで、ダイアログ表示時の背景にぼかし効果をかけることができます。こういった表現は非常に汎用性が高く、blurやBrightnessといったさまざまなフィルターをかけることができます。Safariは最後までベンダープレフィックスが必要でしたが、去年9月に対応したことで、ベンダープレフィックス不要でbackdrop-filterが使えるようになりました。ちなみにChrome、Edge、Firefoxは昔から-webkit-なしで使えました。
続いて、グラデーションするテキストの表現です。CSSを見てみましょう。
「Findy CSS」というロゴに「背景のグラデーション」「テキストの形で背景を切り抜く」「テキストの色を透明にする」という3つの指定をしています。これによりFindyロゴというテキストの形で背景のグラデーションを切り抜くことができます。これが、background-clip: textです。最近はAI紹介ツールのサイトなどで、こういったグラデーションテキストを見ない日はないかと思います。
これも一昔前まで-webkit-というベンダープレフィックスが必要でしたが、今はなしで動作するようになりました。ReactやJavaScriptのツールを使っている人はAutoprefixerで自動で付けるかもしれませんが、こうして生のCSSを書く時は、background-clipに-webkit-が不要になったというのを覚えておくと便利です。
2023年10月頃にChromeが対応したことによって全ブラウザ対応になりました。ちなみにFirefoxやSafariは昔から-webkit-なしで対応していました。
Sassではなく、CSSでネスト（入れ子）にする
次に、SassではなくCSSネストで入れ子にする話です。Sassを使っている方は多いと思いますが、CSSネストはSassのようにスタイルを入れ子で書ける機能です。
containerクラスの中にあるchildクラスに色を設定したい場合、以前は別々に記述していました。しかしSassでは、ネストして書くことができていました。このSassのようなネスト記法が最近では生のCSSでも直接書けるようになった、というのがCSSネストです。
CSSネストではさまざまな入れ子表現が可能です。セクション内のh1タグに対してカラーをネストして作ることもできますし、親要素をグループ化してネストをすることもできます。リンクがホバーした時とアクティブな時に色を変えるといったネストもすることでき、よく使っています。
私が1番使うのはやはりレスポンシブ対応です。従来は@mediaクエリを別に書いていましたが、@mediaや@containerクエリとのネストでも使うことができます。これにより、特定の要素に対するレスポンシブ対応のスタイルをその要素の定義内に直接記述できるため、関連するスタイルが凝縮され、非常に使い勝手がよくなっています。
これはかなりマニアックな話題ですが、CSSネストが導入された当初は、h1のような要素を直接書く際に必ず「&」が必要でしたが、2023年12月からは不要になり、Sassと同じ感覚で使うことができるようになりました。
これは「ネストの緩和された構文の更新」として、Googleが解説記事を出しています。
ちなみに、foo.barというクラスのスタイルを設定したい時に、こういった記法をよくやっている方がいるかと思いますが、このコードは動作しません。こういったことはできません。賛否両論あると思いますが、私はこの記法はあまり好みではないので、使えなくても困りません。
CSSネストのブラウザ対応は、2023年12月をもって全ブラウザに対応しています。
バウンスなどのイージングをtransitionで使う
次に、linear()イージング関数を説明します。バウンスアニメーションのような複雑なイージングをtransitionで使うという話です。new-batchというクラスにtransition-sampleというクラスを付けて、ホバーした際、ぼよよんとしながら拡大するアニメーションにしています。
これまでこのようなアニメーションはtransitionだけでは実現できませんでした。CSSアニメーションを使って、@keyframesごとに複雑な計算式を書くことで一応表現することはできましたが、これにはいくつかデメリットがあったのです。ブラウザを再起動した際に、スタイル指定された瞬間にアニメーションが実行されるため、特定の挙動が発動してしまうという仕様でした。一方、transitionを使うと、ブラウザを再起動しても最初の表示時にアニメーションは発動せず、ちゃんとぼよよんとしたアニメーションができます。
ここで使っているのがlinear()関数です。これは、アニメーションの途中の特定時点での値を直接指定することで複雑な動きを実現するもので、時間35%で値2まで上げ、時間55%で0.85まで縮めるといった指定をしています。スケールの話で言うと、初期状態が1で、2秒かけて動くアニメーションの場合、2秒の35%時点で大きさ2、55%時点で大きさ0.85といった指定ができます。これにより、ぼよよんとしたアニメーションが可能です。linear()関数を使えばバウンスなどの複雑な挙動を実現できますが、自分で書くのは面倒です。しかし既存のCSS変数ライブラリを使えば、linearでのぼよよんとしたアニメーションなどを簡単に実現できます。linear()関数は2023年12月に全ブラウザに対応しました。
CSS変数をアニメーションしたい
CSS変数をグラデーションや虹色のボーダーにアニメーションさせたいケースについて説明します。どうやって実現していくかというと、そもそも虹色の丸いグラデーションはconic gradient（円錐グラデーション）といい、円錐状に色を変化させるグラデーションで、これはfrom degで開始角度を変えられます。conic-gradientの開始位置を指定することで、グラデーションの模様がぐるぐる回るような表現をすることが可能になります。
これをぐるぐる回して虹色をアニメーションさせたいとき、従来はCSS変数で--gradient-angleなどを指定しても、アニメーションできませんでした。
そこで@propertyが登場します。CSS変数--gradient-angleを定義する際に、型を角度、初期値を0deg、そして親要素のスタイルを継承するかどうかを設定します。この設定をすることで、グラデーションがアニメーションするようになります。
次に、最近ウェブサイトでよく見かける虹色ボーダーの面白いテクニックを紹介します。
これは、ネイビーの背景とグラデーションの背景を2つ重ねています。重要なのが、padding-boxとborder-boxの指定です。padding-boxはボックスモデルにおいて、そのパディング領域まで、border-boxはボーダーの領域まで背景が広がります。さらに、ボーダーの色は透明にしています。これにより、余白の領域はネイビーの色が広がり、その外側のボーダーエリアまでグラデーションが広がることで、虹色ボーダーが実現します。
さらに、linear-gradientはネイビーからレッドなどのグラデーション設定ができますが、今回は単色(navy,navy)で書いています。CSS 2025では、linear-gradientが単色の場合、引数を1つに指定できるようになります。これにより、(navy,navy)と単色グラデーションを表現する際に繰り返して書いていたのが、(navy)だけを記述するだけで済むようになり、非常に便利になりました。
これらの技術、つまりグラデーションアニメーションと虹色ボーダーの技術を組み合わせることで、虹色ボーダーアニメーションが実現できます。よくサブスクの申し込みボタンなどでこういった表現が使われているかと思います。
また、先ほどは角度を変えていましたが、hslで色を指定する際、そのhの値をCSS変数で定義し、キーフレームで0から360°まで変化させることで、色相アニメーションも可能です。これらも@propertyがなければ実現できなかったことです。
@propertyのこの機能はFirefoxで2024年7月に対応したため全ブラウザで使えるように、単色linear-gradientも2025年4月に全ブラウザで使えるようになりました。
display:noneの要素を表示するときにアニメーションさせたい
最後に、displayプロパティのアニメーション表示についてです。ボックス要素に対し、JavaScriptを使ってボックスにopenクラスを付けると、ボックスが表示されます。しかし、display: noneからdisplay: blockへの直接的なアニメーションはできないため、瞬時にパンと表示されてしまいます。これらの離散プロパティ（段階的に変化せず「あり」「なし」で切り替わるプロパティ）をアニメーションさせたい場合、starting-styleという新機能が使えるようになりました。
starting-styleを使うと、display: blockになった瞬間のスタイルを定義できます。opacity: 0やtransform: translate(...)の指定をすることで、フェードインしながら表示できます。非表示の時はアニメーションしません。starting-styleは表示する瞬間のスタイルを設定するだけだからです。
非表示の時もアニメーションさせたい場合は、allow-discreteを使います。
これを使うと、非表示の時もアニメーションさせることができます。display: blockからdisplay: noneに変わる際に、opacityやtransformなどのトランジションが完了するまでdisplay: noneになるのを待ってくれる機能です。これにより、非表示時もアニメーションが可能になりました。
これらは特にdialogのアニメーションに役立ちます。dialog要素もdisplay: noneからdisplay: blockになる挙動をしますが、表示される瞬間にopacityやscale 0.8を設定し、allow-discreteを設定することで、dialogの表示・非表示時の演出も手軽に実現できます。
starting-styleはFirefox 129で対応し、全ブラウザで使えるようになりました。一方、allow-discreteはFirefoxではまだ使えません。Firefoxでも、表示時はアニメーションしますが、非表示時は瞬時にパッと消えてしまいます。そのため、Firefoxのallow-discrete対応待ちといえるでしょう。とはいえ、表示時のアニメーションだけでもないよりは良いと個人的には思います。Chromeなど向けに非表示のアニメーションを実装し、ブラウザごとの段階的な表現対応として進めても良いでしょう。
新しい知識を取り入れて、楽しく、ラクにWeb制作をしていきましょう。本日の発表を終わります。ご清聴ありがとうございました。
Q＆A
Q. AIが注目される今、CSSの作り方に生成AIを使うことで、ご自身の開発手法に変化はありましたか。
はい。開発時にはまず生成AIに頼るようにしています。具体的には、CursorやClaude Codeや、DevinのようなAIエージェントを使って開発しています。何か実装したい時はまずAIエージェントにコードを書いてもらい、出てきたものをレビューし、手直ししています。
CSSの知識が生成AIのおかげで不要になるのかという疑問を抱くかもしれませんが、そのようなことは全くありません。生成AIが作ったコードが本当に正しいか見極めるのは最終的に人間なので、正しいCSSの知識はやはり必要です。今回紹介した機能は比較的新しいため、AIが知らないことも多くあります。そのため、「こういう時はこう書くんだよ」とAIを教育しながらCSSを書いています。
Q. @propertyはアニメーションでの使用以外に、可読性などを考慮してCSS変数を明示的に定義するためにも使用しますか。
はい。変数の型を明示的に指定することはよくあります。これは不正な値をセットしようとした時にブラウザがエラーを出してくれるためです。
Q. 最新のCSS情報をどのようにキャッチアップしていますか。
CSSのベースラインをよく見ています。特に全ブラウザで使えるようになった機能が何なのか、という観点で注目しています。新しいCSSは良いですが、現場で使えなければ意味がないので、ベースラインを見て全ブラウザで使えるかどうかを特に気にしています。
また、XでChromeやブラウザ開発者をフォローし、彼らの情報を追うようにもしています。Can i useを見るのも好きで、ブラウザのバージョンごとにどの機能が使えるようになったかを見比べています。個人的にその時間が好きで、そういった形で情報収集を行っています。
Q. Tailwind CSSを使うことは多いですか。
Tailwind CSSは、プロジェクトで使っていれば使います。個人的に積極的に最初から選ぶことはありません。私はReactを書くことが多いため、CSS Modulesや、個人的に気に入っているCSSをTypeScriptで書けるvanilla extractといったライブラリを使っています。しかし最近は考え方が変わってきており、生成AI時代においてTailwindはものすごく相性が良いと感じています。AIエージェントが生成するコードがTailwindで書かれていると、CSSの表現やUIの再現性が非常に高いからです。そのため、生成AI時代においてはTailwindも良い選択だと感じています。ただ、やはり生のCSSが個人的には好きなので、現時点では第一選択ではありません。しかし、AI時代には相性が良いと感じる一方で、Tailwindを使わなくなった時の面倒さも感じながら、今日もCSS Modulesを書いています。
Q. Cursorのルールセットで、CSSに関するおすすめの指定はありますか。
CSSのルールセットには特にこだわりはなく、既存のものを参考に、オリジナルでカスタマイズすることが多いです。ゼロから書くことはあまりせず、どこかから持ってきて自分好みに調整することが多いです。最近はClaude Codeもよく使っています。Claude Codeで初期化すると、プロジェクトの内容を解釈して適切なドキュメントを生成してくれることがあります。その際、CSSの書き方も示されるので、調整しながら進めています。
Q. TailwindはGridとの相性が懸念です。
本当におっしゃる通りです。私はGridが大好きで、レイアウトする際はまずGridを使うほどですが、Tailwindに限らず多くのライブラリでGrid周りは弱いと感じています。そのため、Gridを使いたい場合はCSS Modulesを直接使うことが多いです。
アーカイブ動画・発表資料
イベント本編は、アーカイブ動画を公開しています。また、当日の発表資料も掲載しています。あわせてご覧ください。
▼動画・資料はこちら
※動画の視聴にはFindyへのログインが必要です。