本記事では、2026年5月14日に開催されたオンラインイベント「鹿野さんに聞く！CSSの最新トレンド Ver.2026」の内容をお届けします。過去の開催でも大好評だったUbie株式会社の鹿野 壮（@tonkotsuboy_com）さんをお招きし、2026年の最新CSSトレンドについてお話いただきました。ぜひ本編のアーカイブ動画とあわせてご覧ください。
鹿野：鹿野と申します。CSSと猫が大好きで、@tonkotsuboy_comという名前でXをやっています。本日は、全ブラウザで利用可能な「ベースライン（Baseline）」のCSSを中心に紹介していこうと思います。
新しいCSSが日々生まれていますが、AI時代において、どうして私たちは新しいCSSを学ぶのでしょうか。学ぶメリットとしては以下があります。
・長いJavaScriptで実現していたものが、短いCSSで済む
・読みやすいコードになり、開発者体験（DX）が向上する
・バグが減り、制作物の品質が向上する
また、ブラウザの実装状況を知る指標として「ベースライン」があります。すべての主要ブラウザで新しく対応した「Newly available」や、そこから30ヶ月以上経過し安心して使える「Widely available」などがあります。現場で投入する際は、MDNやCan I Use、そして「web.dev」などでベースラインのステータスを確認し、自身のサービスの対応状況と照らし合わせていく必要があります。
それでは、2026年最新CSS実践テクニックをご紹介します。
2026年最新CSS実践テクニック
1. グラデーションを綺麗に見せる（oklch × background-clip: text）
動画（9:13〜）
【従来の方法】
これまで、テキストをグラデーションにする実装は少し工夫が必要でした。また、linear-gradient(blue, red)のように記述して青と赤の中間色を sRGB 空間で補間すると、人間の目には均等ではなく、グラデーションの中央が暗く濁ったように見えてしまうという課題がありました。
【イマドキの方法①：background-clip: text】
まずは、背景にグラデーションを指定し、background-clip: text を使って文字の形に切り抜く手法です。
