🖍️
「鹿野さんに聞く！CSS の最新トレンド Ver.2025」 イベントレポート
はじめに ― “2025 年版 CSS アップデート” を一気に総ざらい
6 月 10 日に配信された 「鹿野さんに聞く！CSS の最新トレンド Ver.2025」 は、昼休みの 1 時間で “今年押さえるべき CSS 機能” を一気にアップデートできる濃密なセッションでした。 Ubie 株式会社のプロダクトエンジニア鹿野 壮さん（通称 tonkotsuboy_com）が、デモとコードを交えながら 7 つの注目トピック を解説。終了後には Q&A で実装現場のリアルな疑問にも答えてくださり、チャット欄は終始大盛り上がりでした。
以下、当日の内容を章立てで整理しつつ、実務で役立つポイントを厳選してお届けします。
1. 今年まず触りたい 7 つの CSS 機能
# | 機能/仕様 | 何がうれしいか |
|---|---|---|
1 |
内での
利用 | 選択肢をブロック毎に区切れる。都道府県リストなど“長大セレクト”の UX が改善。全ブラウザ対応済み。 |
2 |
（ブロックレイアウト） | Flex/Grid を宣言せずに 1 行で縦中央揃え。
だけで済むので、HTML が汚れない。 |
3 |
&
から WebKit プレフィクスが不要に | グラデーション文字・ガラスモーフィズムがそのまま書ける。プレフィクス管理の手間が消滅。 |
4 | CSS Nesting（入れ子構文） | Sass なしで公式ネストが書ける。
や Container Queries もブロック内にまとめられ、関心ごとを凝縮。 |
5 |
イージング関数 | 1 行でバウンスなど高度なイージングを表現可能。従来の
多重定義から脱却。 |
6 |
によるカスタムプロパティの型宣言 | CSS 変数をアニメーション可能に。グラデーション角度や HSL 色相を滑らかに変化させる表現が簡潔に。 |
7 |
&
|
の切替にトランジションを適用。ダイアログやモーダルのフェードイン／アウトが純 CSS で実現。 |
デモで刺さったポイント抜粋
セレクト分割の体験県名リストに
<hr>を挟むだけで「九州ブロックはこちら」と視線誘導が一気に改善。実装は HTML5 のネイティブ要素なのでアクセシビリティも確保できます。Nesting + Media Queries
.box { background: blue; @media (width ≥ 600px) { background: red; } }
これで “どのメディアクエリがどの要素に掛かるのか” が一目瞭然。ネスト解禁により “脱 Sass” を検討しやすくなりました。
@property× コーニックグラデーション360 deg 回転する虹色ボーダーを純 CSS で。型宣言により 「数値だと分かったうえで補間」 してくれるため、キーフレームに頼らない滑らかな演出が可能になりました。
2. ライブ Q&A で深掘りされたポイント
Q1. 生成 AI が普及する今、CSS の書き方は変わりましたか？鹿野さん 「まず AI に書かせてからレビューするスタイルになりました。AI のアウトプットを正しく評価するには結局 “本物の CSS 知識” が必須。だからこそ今日のような基礎アップデートが重要です。」
Q2. Tailwind との付き合い方は？「チームで導入済みなら使いますが、個人の第一選択は CSS Modules + Vanilla Extract。とはいえ生成 AI との相性は抜群なので、AI 時代の実装効率を考えると Tailwind を選ぶケースも増えそうです。」
Q3.
@propertyはアニメ以外の用途でも書くべき？「はい。型を明示すると 誤った値が入った際にブラウザが警告 してくれます。“リントする CSS” というイメージで積極的に宣言しています。」
Q4. 実装採用の判断軸は？「必ず “対象ユーザーの実ブラウザ比率” を GA 等で確認します。そのうえで Chrome の Baseline や Can I use を見て『全ブラウザ＋数か月』経ったら本採用、という流れです。」
3. 明日から使うためのチェックリスト
ブラウザターゲットを再確認
自社プロダクトのアクセス解析を開き、IE 系列が完全ゼロかどうかを把握。
PostCSS／ビルドツールのプレフィクス設定を見直す
WebKit 用に残っている
background-clipなどを除去してビルド時間を短縮。コンポーネントライブラリのアップデート
Dialog など
starting-styleが効く UI でモーションガイドラインを刷新。デザインシステムへのフィードバック
Nesting 導入なら命名規則を再点検。SCSS ベース規約がそのまま移植できるか確認。
生成 AI のプロンプト例を整備
「
@propertyで型宣言してからアニメーションを書く」といった要件を AI に明示すると、提示コードの質が安定。
終章 ― “綺麗に書ける” ことは最大の DX
鹿野さんの講演が強調していたのは「新機能はコードを短くし、読みやすくし、そしてバグを減らす」というシンプルな事実でした。
<hr>が選択肢の“探しづらさ”を解決たった 1 行の
align-contentが巨大な Flex 宣言を不要に@propertyがカスタムプロパティを“型安全”に変える
どのトピックも「派手に見える新表現」ではなく 開発者体験とメンテ性の向上 に直結している点が印象的です。
まとめのひと言
「ブラウザさえ追いつけば、CSS は必ず “楽をさせて” くれる」
2025 年版の CSS は、その約束を着実に果たし始めています。今回紹介された 7 機能を味方につけ、ぜひ “余裕ある実装” を明日から楽しみましょう！
Yardでは、AI・テック領域に特化したスポットコンサル サービスを提供しています。
興味がある方は、初回の無料スポットコンサルをお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
Read next
Loading recommendations...