鹿野さんに聞く！CSSの最新トレンド Ver.2026

2026/05/14開催の「鹿野さんに聞く！CSSの最新トレンド Ver.2026」
の登壇資料です
https://findy.connpass.com/event/390152/

各デモのURLはこちら
https://tonkotsuboy.github.io/findy-css-2026-demos/

Transcript

2. CSSと猫が大好きです @tonkotsuboy_com 鹿野 壮
3. 1. グラデーションをきれいに見せる （oklch × background-clip: text ） 2. 要素を基準にポップオーバーを表示する （anchor-position × popover ） 3. JavaScriptなしでdialog・popoverを開閉する （command / commandfor ） 4. 行列を入れ子にする（subgrid ） 本日の構成
4. 新しいCSSを学ぶメリットとは？ 新しいCSSが日々生まれている
5. 長い JavaScript で実現していたものが、 短い CSS で済む 読みやすいコードになり、 開発者体験（DX）が向上する バグが減り、制作物の品質が向上する 新しいCSSを学ぶメリット
6. ブラウザ実装状況を知る指標 01 ベースライン
7. HTML・CSS・JavaScript等のブラウザサポートの情報 Newly available Chrome, Edge, Firefox, Safariのデスクトップ版・モバイル版 すべてで対応した機能 Widely available Newly available になってから 30ヶ月経過した機能 Limited availability 未対応のブラウザがある機能 ベースラインとは https://web.dev/baseline
8. ベースラインをMDNで確認する https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Grid_layout/Subgrid
9. ベースラインを Can I Use で確認する https://caniuse.com/css-subgrid
10. ベースラインをweb.devで確認する https://web.dev/baseline?hl=ja
11. 2024 popover , @starting-style , text-wrap: balance , light-dark() , scrollbar-gutter , backdrop-filter 2025 @scope , ビュートランジション, ::details-content , contenteditable="plaintext-only" 2026 contrast-color() , ::highlight , text-indent: each-line , shape() , rcap 2024-2026のHTML・CSSのベースラインの一部
12. ベースラインで利用可能な CSSを中心に紹介します
13. 01 イマドキCSS
14. 01 グラデーションをきれいに見せる oklch と background-clip: text
15. デモ: テキストグラデーションの色補間 https://tonkotsuboy.github.io/findy-css-2026-demos/1_gradient-text/1_basic/
16. 背景をグラデーションにし、 background-clip:text で文字の形に切り抜く CSS .gradient-text { /* 背景グラデーション */ background: linear-gradient(-45deg, #2af598, #009efd); /* テキスト色を透明 */ color: transparent; /* 背景を文字の形で切り抜く */ background-clip: text; } 【イマドキ】 background-clip:text
17. linear-gradient(blue, red) のような記述では、 blueとredの中間色がsRGB空間で補間される sRGB補間は人間の目には均等ではなく、暗くなったように見え る linear-gradient(blue, red)は中央色が暗くなる
18. linear-gradient(in oklch, red, blue); のように in oklch を明示すると「OKLCH」で補間される OKLCHは人間の目に均等で、 彩度が保たれたまま鮮やかなグラデーションになる 【イマドキ】 「OKLCH」で補間する https://tonkotsuboy.github.io/findy-css-2026-demos/1_gradient-text/2_oklch-vs-srgb/
19. 人間の目に均等な色空間。3つの値で色を表す L（明度）— 明るさ C（彩度）— 鮮やかさ H（色相）— 色味（角度） oklch() で色指定にも使える CSS color: oklch(0.62 0.22 264); /* 青 */ color: oklch(0.72 0.22 330); /* ピンク */ OKLCHとは
20. CSS /* Tailwind v4 のカラーパレット定義 */ --color-red-500: oklch(63.7% 0.237 25.331); --color-blue-500: oklch(62.3% 0.214 259.815); 採用理由: 広色域 — sRGB の限界を超え、より鮮やかな色を表現 グラデ補間が綺麗 — 中間色がくすまない（既定で OkLAB 補間） 知覚的均等性 — 50 〜 950 のスケールが等間隔に見える Tailwind CSS v4 が OKLCH を全面採用 https://tailwindcss.com/blog/tailwindcss-v4
21. ブラウザ バージョン リリース日 Chrome / Edge 111 2023年3月 Safari 16.4 2023年3月 Firefox 113 2023年5月 Baseline 2023 — Newly available oklch() のブラウザ対応状況 https://caniuse.com/wf-oklabcolor-mix
22. 02 要素の位置を基準に ポップオーバーを表示する anchor-position ＋ popover
23. デモ: ヘッダーのメニュー用ポップオーバー https://tonkotsuboy.github.io/findy-css-2026-demos/2_anchor-position/
24. JavaScript const button = document.querySelector('.trigger'); const popover = document.querySelector('.popover'); const close = () => popover.classList.remove('open'); button.addEventListener('click', () => popover.classList.toggle('open')); document.addEventListener('keydown', (e) => e.key === 'Escape' && close()); document.addEventListener('click', (e) => !popover.contains(e.target) && !button.contains(e.target) && close()); 【従来】 Popoverを作るのは大変だった
25. クリックで開く ESC・背景クリックで閉じる 適切なフォーカス HTML <button commandfor="my-popover" command="toggle-popover">開く</button> <div id="my-popover" popover> <p>ポップオーバーの内容</p> </div> 【イマドキ】 Popover APIで表示・非表示が簡単に
26. position: fixed ウインドウの絶対位置で配置 要素を基準にできない JavaScript 煩雑 function updatePosition() { const rect = button.getBoundingClientRect(); popover.style.top = `${rect.bottom + 8}px`; popover.style.left = `${rect.left}px`; } 【従来】 ポップオーバーの位置指定手段が煩雑
27. HTMLでポップオーバーの基準となる要素を指定する （anchor-name ） HTML <button class="button" commandfor="my-popover" command="toggle-popover">開く</button> .button { anchor-name: --my-anchor; } 【イマドキ】CSS Anchor Positioningで位置指定①
28. ポップオーバーをアンカー要素と紐づけ（position-anchor ） アンカーからの位置を指定（anchor または position-area ） HTML <div id="my-popover" popover class="popover">ポップオーバー</div> CSS .popover { position-anchor: --my-anchor; top: anchor(bottom); /* アンカーの下端 */ left: anchor(left); /* アンカーの左端 */ right: auto; /* UA の inset: 0 を打ち消す */ bottom: auto; } 【イマドキ】CSS Anchor Positioningで位置指定②
29. CSS .tip { position: absolute; position-anchor: --my-btn; position-area: bottom; /* はみ出したら反対側へ自動的に配置を試す */ position-try-fallbacks: flip-block, flip-inline; } flip-block ：ブロック軸（縦）方向に反転 flip-inline ：インライン軸（横）方向に反転 flip-start ：対角軸で反転（block／inline 軸を入れ替え） position-try-fallbacks で画面端の自動回避
30. ブラウザ バージョン リリース日 Chrome 125 2024年5月 Edge 125 2024年5月 Safari 26 2025年9月 Firefox 147 2026年1月 Baseline 2026 — Newly available anchor-position のブラウザ対応状況 https://caniuse.com/css-anchor-positioning
31. ブラウザ バージョン リリース日 Chrome / Edge 114 2023年5月 Safari 17.0 2023年9月 Firefox 125 2024年4月 Baseline 2024 — Newly available Popover API のブラウザ対応状況 https://caniuse.com/mdn-html_global_attributes_popover
32. 03 JavaScriptなしで dialogやpopoverを開閉する commandfor , command 属性（Invoker Commands）
33. dialog・popoverの開閉デモ https://tonkotsuboy.github.io/findy-css-2026-demos/3_command-commandfor/1_dialog/
34. 専用属性の popovertarget やpopovertargetaction を使う HTML <button popovertarget="menu" 　　　　　popovertargetaction="toggle">ボタン</button> <div id="menu" popover>...</div> 【従来】popoverは専用属性で操作
35. 属性で開閉する手段はなく、JavaScriptで開閉していた HTML <button id="open">開く</button> <dialog id="dlg">...</dialog> JavaScript open.addEventListener("click", () => { dlg.showModal(); }); 【従来】dialogはJavaScriptで開閉する必要があった
36. popoverもdialogも command 属性とcommandfor 属性で制御 HTML <button commandfor="menu" command="toggle-popover">メニュー</button> <div id="menu" popover>...</div> HTML <button commandfor="dlg" command="show-modal">開く</button> <dialog id="dlg">...</dialog> 【イマドキ】command + commandfor に統一
37. popover 専用 command 値 用途 show-popover popover を開く hide-popover popover を閉じる toggle-popover popover をトグル <dialog> 専用 command 値 用途 show-modal dialog をモーダル表示 close dialog を閉じる request-close dialog に閉じる要求を送る command 属性で指定できる値
38. dialogもpopoverも、表示・非表示がdisplay: none と display: block という「離散プロパティ」の値が切り替わる @starting-style とallow-discrete を使うことで、 表示・非表示時のアニメーションができる 非表示のアニメーションはFirefox"以外"で対応 dialog, popoverの表示・非表示アニメーション
39. CSS .dialog { display: none; opacity: 0; transition: 0.4s allow-discrete; } .dialog[open] { display: block; opacity: 1; @starting-style { opacity: 0; } } [open] 属性で 表示状態のスタイルを指定 表示時 @starting-style の効果で アニメーション 非表示時 allow-discrete の効果で アニメーション ※ 非表示アニメーションは Firefox以外対応 dialogの開閉アニメーション
40. CSS .theme-menu { opacity: 0; transform: translateY(-4px); transition: 0.15s allow-discrete; } .theme-menu:popover-open { opacity: 1; transform: translateY(0); @starting-style { opacity: 0; transform: translateY(-4px); } } :popover-open 擬似クラスで 表示状態のスタイルを指定 表示時 @starting-style の効果で アニメーション 非表示時 allow-discrete の効果で アニメーション ※ 非表示アニメーションは Firefox以外対応 popoverの開閉アニメーション
41. ブラウザ バージョン リリース日 Chrome / Edge 135 2025年4月 Firefox 144 2025年10月 Safari 26.2 2025年12月 Baseline 2025 — Newly available Invoker Commands のブラウザ対応状況 https://caniuse.com/mdn-html_elements_button_command
42. 04 行列を入れ子にしたい subgrid
43. デモ: カードデザインの各要素の高さを揃える https://tonkotsuboy.github.io/findy-css-2026-demos/4_subgrid/1_two-cards/
44. <a href="#" class="card"> <div class="thumb"> <img src="./画像.png" /> </div> <time class="date">2026年5月14日</time> <h3 class="title">鹿野さんに聞く！CSSの最新トレンド Ver.2026</h3> <div class="foot-row"> <button>参加申し込み</button> </div> </a> HTML
45. 4行の親行列をつくる 子行列を配置する 子行列の行は、親の行に一致させる 【イマドキ】 行列を入れ子にする
46. タイトルの長さが違っても、 サムネ・日付・タイトル・ボタンの行位置が揃う CSS .grid { display: grid; grid-template-columns: repeat(2, 1fr); } .card { display: grid; grid-template-rows: subgrid; grid-row: span 4; } 2列の行列を作り、子を配置
47. それぞれの行で高さが揃う カード自体が複数行に配置されてもOK https://tonkotsuboy.github.io/findy-css-2026-demos/4_subgrid/2_three-cards/
48. ブラウザ バージョン リリース日 Firefox 71 2019年12月 Safari 16.0 2022年9月 Chrome / Edge 117 2023年9月 Baseline 2023 — Newly available subgrid のブラウザ対応状況 https://caniuse.com/css-subgrid
49. 本日紹介したモダンCSS 03 まとめ
50. 1. グラデーションをきれいに見せる oklch background-clip: text 2. 要素を基準にポップオーバーを表示する anchor-position popover 3. JavaScriptなしでdialog・popoverを開閉する command commandfor 4. 行列を入れ子にする subgrid 本日紹介したモダンCSS
51. 新しい知識を取り入れて 楽しくラクにウェブ制作をしましょう
52. XでもフロントエンドとAI情報を発信しています @tonkotsuboy_com