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

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

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で確認する
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のベースラインの一部 https://web.dev/baseline/2026?hl=ja
12. ベースラインで利用可能な CSSを中心に紹介します
13. 01 イマドキCSS
14. 01 グラデーションをきれいに見せる oklch と background-clip: text
15. Demo
16. デモ: テキストグラデーションの色補間
17. 背景をグラデーションにし、 background-clip:text で文字の形に切り抜く CSS .gradient-text { /* 背景グラデーション */ background: linear-gradient(-45deg, #2af598, #009efd); /* テキスト色を透明 */ color: transparent; /* 背景を文字の形で切り抜く */ background-clip: text; } 【イマドキ】 background-clip:text
18. linear-gradient(blue, red) のような記述では、 blueとredの中間色がsRGB空間で補間される sRGB補間は人間の目には均等ではなく、暗くなったように見え る linear-gradient(blue, red)は中央色が暗くなる
19. linear-gradient(in oklch, red, blue); のように in oklch を明示すると「OKLCH」で補間される OKLCHは人間の目に均等で、 彩度が保たれたまま鮮やかなグラデーションになる 【イマドキ】 「OKLCH」で補間する
20. 人間の目に均等な色空間。 3 つの値で色を表す。 L（明度）— 明るさ C（彩度）— 鮮やかさ H（色相）— 色味（角度） oklch() で色指定にも使える CSS color: oklch(0.62 0.22 264) /* 青 */ color: oklch(0.72 0.22 330) /* ピンク */ OKLCHとは
21. 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
22. ブラウザ バージョン リリース日 Chrome / Edge 111 2023年3月 Safari 16.4 2023年3月 Firefox 113 2023年5月 Baseline 2023 — Newly available oklch() のブラウザ対応状況 https://caniuse.com/css-color-mix
23. 02 要素の位置を基準に ポップオーバーを表示する anchor-position ＋ popover
24. Demo
25. 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を作るのは大変だった
26. クリックで開く ESC・背景クリックで閉じる 適切なフォーカス HTML <button commandfor="my-popover" command="toggle-popover">開く</button> <div id="my-popover" popover> <p>ポップオーバーの内容</p> </div> 【イマドキ】 Popover APIで表示・非表示が簡単に
27. position: fixed ウインドウの絶対位置で配置 要素を基準にできない JavaScript 煩雑 function updatePosition() { const rect = button.getBoundingClientRect(); popover.style.top = `${rect.bottom + 8}px`; popover.style.left = `${rect.left}px`; } 【従来】 ポップオーバーの位置指定手段が煩雑
28. HTMLでポップオーバーの基準となる要素を指定する （anchor-name ） HTML <button class="button" commandfor="my-popover" command="toggle-popover">開く</button> .button { anchor-name: --my-anchor; } 【イマドキ】CSS Anchor Positioningで位置指定①
29. ポップオーバーをアンカー要素と紐づけ（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); /* アンカーの左端 */ } 【イマドキ】CSS Anchor Positioningで位置指定②
30. 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 で画面端の自動回避
31. ブラウザ バージョン リリース日 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
32. ブラウザ バージョン リリース日 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
33. 03 JavaScriptなしでdialogやpopoverを開閉す る commandfor , command 属性（Invoker Commands）
34. Demo
35. dialog・popoverの開閉デモ
36. 専用属性の popovertarget やpopovertargetaction を使う HTML <button popovertarget="menu" 　　　　　popovertargetaction="toggle">ボタン</button> <div id="menu" popover>...</div> 【従来】popoverは専用属性で操作
37. 属性で開閉する手段はなく、JavaScriptで開閉していた HTML <button id="open">開く</button> <dialog id="dlg">...</dialog> JavaScript open.addEventListener("click", () => { dlg.showModal(); }); 【従来】dialogはJavaScriptで開閉する必要があった
38. popoverもdialogもcommand 属性とcommandfor 属性で制御 popover HTML <button commandfor="menu" command="toggle-popover">メニュー</button> <div id="menu" popover>...</div> dialog HTML <button commandfor="dlg" command="show-modal">開く</button> <dialog id="dlg">...</dialog> 【イマドキ】command + commandfor に統一
39. popover 専用 command 値 用途 show-popover popover を開く hide-popover popover を閉じる toggle-popover popover をトグル <dialog> 専用 command 値 用途 show-modal dialog をモーダル表示 close dialog を閉じる request-close dialog に閉じる要求を送る command 属性で指定できる値
40. dialogもpopoverも、表示・非表示がdisplay: none と display: block という「離散プロパティ」の値が切り替わる @starting-style とallow-discrete を使うことで、 表示・非表示時のアニメーションができる 非表示のアニメーションはFirefox"以外"で対応 dialog, popoverの表示・非表示アニメーション
41. 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の開閉アニメーション
42. 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の開閉アニメーション
43. ブラウザ バージョン リリース日 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
44. 04 行列を入れ子にしたい subgrid
45. デモ: カードデザインの各要素の高さを揃える
46. <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
47. 4行の親行列をつくる 子行列を配置する 子行列の行は、親の行に一致させる 【イマドキ】 行列を入れ子にする
48. CSS .grid { display: grid; grid-template-columns: repeat(2, 1fr); } .card { display: grid; grid-template-rows: subgrid; grid-row: span 4; } 2列の行列を作り、子を配置 タイトルの長さが違っても、サムネ・日付・タイトル・ボタンの行位置が揃う
49. それぞれの行で高さが揃う カード自体が複数行に配置されてもOK
50. ブラウザ バージョン リリース日 Firefox 71 2019年12月 Safari 16.0 2022年9月 Chrome / Edge 117 2023年9月 Baseline 2023 — Newly available subgrid のブラウザ対応状況 https://caniuse.com/css-subgrid
51. 本日紹介したモダンCSS 03 まとめ
52. 1. グラデーションをきれいに見せる oklch background-clip: text 2. 要素を基準にポップオーバーを表示する anchor-position popover 3. JavaScriptなしでdialog・popoverを開閉する command commandfor 4. 行列を入れ子にする subgrid 本日紹介したモダンCSS
53. 新しい知識を取り入れて 楽しくラクにウェブ制作をしましょう