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

鹿野 壮 CSSと猫が大好きです @tonkotsuboy_com

本日の構成 1. グラデーションをきれいに見せる （oklch × background-clip: text） 2. 要素を基準にポップオーバーを表示する （anchor-position × popover） 3. JavaScriptなしでdialog・popoverを開閉する （command / commandfor） 4. 行列を入れ子にする（subgrid）

新しいCSSが日々生まれている 新しいCSSを学ぶメリットとは？

新しいCSSを学ぶメリット 長い JavaScript で実現していたものが、 短い CSS で済む 読みやすいコードになり、 開発者体験（DX）が向上する バグが減り、制作物の品質が向上する

01 ベースライン ブラウザ実装状況を知る指標

ベースラインとは HTML・CSS・JavaScript等のブラウザサポートの情報 Newly available Chrome, Edge, Firefox, Safariのデスクトップ版・モバイル版 すべてで対応した機能 Widely available Newly available になってから 30ヶ月経過した機能 Limited availability 未対応のブラウザがある機能 https://web.dev/baseline

• https://web.dev/baseline

ベースラインをMDNで確認する https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Grid_layout/Subgrid

• https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Grid_layout/Subgrid

ベースラインを Can I Use で確認する https://caniuse.com/css-subgrid

• https://caniuse.com/css-subgrid

ベースラインをweb.devで確認する https://web.dev/baseline?hl=ja

• https://web.dev/baseline?hl=ja

2024-2026のHTML・CSSのベースラインの一部 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 , , ,

ベースラインで利用可能な CSSを中心に紹介します

01 イマドキCSS

01 oklch と background-clip: text グラデーションをきれいに見せる

デモ: テキストグラデーションの色補間 https://tonkotsuboy.github.io/findy-css-2026-demos/1_gradient-text/1_basic/

• https://tonkotsuboy.github.io/findy-css-2026-demos/1_gradient-text/1_basic/

【イマドキ】 background-clip:text

背景をグラデーションにし、
background-clip:text で文字の形に切り抜く
CSS

.gradient-text {
/* 背景グラデーション */
background:
linear-gradient(-45deg, #2af598, #009efd);
/* テキスト色を透明 */
color: transparent;
/* 背景を文字の形で切り抜く */
background-clip: text;
}

linear-gradient(blue, red)は中央色が暗くなる のような記述では、 blueとredの中間色がsRGB空間で補間される sRGB補間は人間の目には均等ではなく、暗くなったように見え る linear-gradient(blue, red)

【イマドキ】 「OKLCH」で補間する のように を明示すると「OKLCH」で補間される OKLCHは人間の目に均等で、 彩度が保たれたまま鮮やかなグラデーションになる linear-gradient(in oklch, red, blue); in oklch https://tonkotsuboy.github.io/findy-css-2026-demos/1_gradient-text/2_oklch-vs-srgb/

• https://tonkotsuboy.github.io/findy-css-2026-demos/1_gradient-text/2_oklch-vs-srgb/

OKLCHとは 人間の目に均等な色空間。3つの値で色を表す L（明度）— 明るさ C（彩度）— 鮮やかさ H（色相）— 色味（角度） oklch() CSS で色指定にも使える color: oklch(0.62 0.22 264); color: oklch(0.72 0.22 330); /* 青 */ /* ピンク */

Tailwind CSS v4 が OKLCH を全面採用 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 のスケールが等間隔に見える https://tailwindcss.com/blog/tailwindcss-v4

• https://tailwindcss.com/blog/tailwindcss-v4

oklch() のブラウザ対応状況 ブラウザ バージョン リリース日 Chrome / Edge 111 2023年3月 Safari 16.4 2023年3月 Firefox 113 2023年5月 Baseline 2023 — Newly available https://caniuse.com/wf-oklabcolor-mix

• https://caniuse.com/wf-oklabcolor-mix

02 anchor-position ＋ popover 要素の位置を基準に ポップオーバーを表示する

デモ: ヘッダーのメニュー用ポップオーバー https://tonkotsuboy.github.io/findy-css-2026-demos/2_anchor-position/

• https://tonkotsuboy.github.io/findy-css-2026-demos/2_anchor-position/

【従来】 Popoverを作るのは大変だった 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 APIで表示・非表示が簡単に HTML クリックで開く ESC・背景クリックで閉じる 適切なフォーカス <button commandfor="my-popover" command="toggle-popover">開く</button> <div id="my-popover" popover> <p>ポップオーバーの内容</p> </div>

【従来】 ポップオーバーの位置指定手段が煩雑 position: fixed ウインドウの絶対位置で配置 要素を基準にできない JavaScript 煩雑 function updatePosition() { const rect = button.getBoundingClientRect(); popover.style.top = `${rect.bottom + 8}px`; popover.style.left = `${rect.left}px`; }

【イマドキ】CSS Anchor Positioningで位置指定①
HTMLでポップオーバーの基準となる要素を指定する
（anchor-name）
HTML

<button class="button"
commandfor="my-popover"
command="toggle-popover">開く</button>
.button {
anchor-name: --my-anchor;
}

【イマドキ】CSS Anchor Positioningで位置指定②

ポップオーバーをアンカー要素と紐づけ（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;
}

position-try-fallbacks

で画面端の自動回避

CSS

.tip {
position: absolute;
position-anchor: --my-btn;
position-area: bottom;
/* はみ出したら反対側へ自動的に配置を試す */
position-try-fallbacks: flip-block, flip-inline;
}

：ブロック軸（縦）方向に反転
flip-inline：インライン軸（横）方向に反転
flip-start：対角軸で反転（block／inline 軸を入れ替え）
flip-block

anchor-position のブラウザ対応状況 ブラウザ バージョン リリース日 Chrome 125 2024年5月 Edge 125 2024年5月 Safari 26 2025年9月 Firefox 147 2026年1月 Baseline 2026 — Newly available https://caniuse.com/css-anchor-positioning

• https://caniuse.com/css-anchor-positioning

Popover API のブラウザ対応状況 ブラウザ バージョン リリース日 Chrome / Edge 114 2023年5月 Safari 17.0 2023年9月 Firefox 125 2024年4月 Baseline 2024 — Newly available https://caniuse.com/mdn-html_global_attributes_popover

• https://caniuse.com/mdn-html_global_attributes_popover

03 , commandfor command 属性（Invoker Commands） JavaScriptなしで dialogやpopoverを開閉する

dialog・popoverの開閉デモ https://tonkotsuboy.github.io/findy-css-2026-demos/3_command-commandfor/1_dialog/

• https://tonkotsuboy.github.io/findy-css-2026-demos/3_command-commandfor/1_dialog/

【従来】popoverは専用属性で操作 専用属性の popovertargetやpopovertargetactionを使う HTML <button popovertarget="menu" popovertargetaction="toggle">ボタン</button> <div id="menu" popover>...</div>

【従来】dialogはJavaScriptで開閉する必要があった
属性で開閉する手段はなく、JavaScriptで開閉していた
HTML

<button id="open">開く</button>
<dialog id="dlg">...</dialog>
JavaScript

open.addEventListener("click", () => {
dlg.showModal();
});

【イマドキ】command + commandfor に統一 HTML popoverもdialogも command属性とcommandfor属性で制御 <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 popover 専用 値 属性で指定できる値 用途 show-popover popover を開く hide-popover popover を閉じる toggle-popover popover をトグル command <dialog> 値 専用 用途 show-modal dialog をモーダル表示 close dialog を閉じる request-close dialog に閉じる要求を送る command

dialog, popoverの表示・非表示アニメーション dialogもpopoverも、表示・非表示がdisplay: noneと display: blockという「離散プロパティ」の値が切り替わる @starting-styleとallow-discreteを使うことで、 表示・非表示時のアニメーションができる 非表示のアニメーションはFirefox"以外"で対応

dialogの開閉アニメーション CSS .dialog { display: none; opacity: 0; transition: 0.4s allow-discrete; } .dialog[open] { display: block; opacity: 1; @starting-style { opacity: 0; } } 属性で 表示状態のスタイルを指定 表示時 @starting-styleの効果で アニメーション 非表示時 allow-discreteの効果で アニメーション ※ 非表示アニメーションは Firefox以外対応 [open]

popoverの開閉アニメーション 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); } } 擬似クラスで 表示状態のスタイルを指定 表示時 @starting-styleの効果で アニメーション 非表示時 allow-discreteの効果で アニメーション ※ 非表示アニメーションは Firefox以外対応 :popover-open

Invoker Commands のブラウザ対応状況 ブラウザ バージョン リリース日 Chrome / Edge 135 2025年4月 Firefox 144 2025年10月 Safari 26.2 2025年12月 Baseline 2025 — Newly available https://caniuse.com/mdn-html_elements_button_command

• https://caniuse.com/mdn-html_elements_button_command

04 subgrid 行列を入れ子にしたい

デモ: カードデザインの各要素の高さを揃える https://tonkotsuboy.github.io/findy-css-2026-demos/4_subgrid/1_two-cards/

• https://tonkotsuboy.github.io/findy-css-2026-demos/4_subgrid/1_two-cards/

HTML <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>

【イマドキ】 行列を入れ子にする 4行の親行列をつくる 子行列を配置する 子行列の行は、親の行に一致させる

2列の行列を作り、子を配置

CSS

タイトルの長さが違っても、
サムネ・日付・タイトル・ボタンの行位置が揃う

.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
}

カード自体が複数行に配置されてもOK それぞれの行で高さが揃う https://tonkotsuboy.github.io/findy-css-2026-demos/4_subgrid/2_three-cards/

• https://tonkotsuboy.github.io/findy-css-2026-demos/4_subgrid/2_three-cards/

subgrid のブラウザ対応状況 ブラウザ バージョン リリース日 Firefox 71 2019年12月 Safari 16.0 2022年9月 Chrome / Edge 117 2023年9月 Baseline 2023 — Newly available https://caniuse.com/css-subgrid

• https://caniuse.com/css-subgrid

03 まとめ 本日紹介したモダンCSS

本日紹介したモダンCSS 1. グラデーションをきれいに見せる oklch background-clip: text 2. 要素を基準にポップオーバーを表示する anchor-position popover 3. JavaScriptなしでdialog・popoverを開閉する command commandfor 4. 行列を入れ子にする subgrid

新しい知識を取り入れて 楽しくラクにウェブ制作をしましょう

XでもフロントエンドとAI情報を発信しています @tonkotsuboy_com

• https://x.com/tonkotsuboy_com