---
title: 鹿野さんに聞く！CSSの最新トレンド Ver.2026
tags:  #css #findy #イマドキcss  
author: [鹿野壮](https://image.docswell.com/user/tonkotsuboy_com)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/DJY4DVW87M.jpg?width=480
description: 2026/05/14開催の「鹿野さんに聞く！CSSの最新トレンド Ver.2026」 の登壇資料です https://findy.connpass.com/event/390152/  各デモのURLはこちら https://tonkotsuboy.github.io/findy-css-2026-demos/
published: May 14, 26
canonical: https://image.docswell.com/s/tonkotsuboy_com/K4NE71-20260514-findy-css
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/DJY4DVW87M.jpg)



# Page. 2

![Page Image](https://bcdn.docswell.com/page/V7NY6M99E8.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ9PLN2373.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ8DXK5LJD.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LJLM8ZYQER.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/47MY6VDK7W.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/P7R9P246E9.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PJXQ3D2D7X.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/3JK9YXMDJD.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE3W95YPE5.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/8EDKGD537G.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/V7PK3XGPJ8.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/2JVV4L6VJQ.jpg)

01
イマドキCSS


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5EGL1XN1JL.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4JQYD8QN7P.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/K74WZ2N3E1.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LJ1YRM5ZEG.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GJWG135672.jpg)

【イマドキ】 「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/


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EZLPVNR73.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/Y76WM5817V.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/G75MZY9L74.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/9J29RG23ER.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/DEY4DVY8JM.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/VJNY6MP978.jpg)

【従来】 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());


# Page. 25

![Page Image](https://bcdn.docswell.com/page/YE9PLN33J3.jpg)

【イマドキ】 Popover APIで表示・非表示が簡単に
HTML
クリックで開く
ESC・背景クリックで閉じる
適切なフォーカス
<button commandfor="my-popover" command="toggle-popover">開く</button>
<div id="my-popover" popover>
<p>ポップオーバーの内容</p>
</div>


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GE8DXKMLED.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/LELM8Z3Q7R.jpg)

【イマドキ】CSS Anchor Positioningで位置指定①
HTMLでポップオーバーの基準となる要素を指定する
（anchor-name）
HTML
<button class="button"
commandfor="my-popover"
command="toggle-popover">開く</button>
.button {
anchor-name: --my-anchor;
}


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4JMY6VMKJW.jpg)

【イマドキ】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;
}


# Page. 29

![Page Image](https://bcdn.docswell.com/page/PJR9P2V679.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PEXQ3DZDJX.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/3EK9YX8DED.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/L73W952P75.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/87DKGDZ3JG.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/VJPK3XDPE8.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/2EVV4L1VEQ.jpg)

【従来】dialogはJavaScriptで開閉する必要があった
属性で開閉する手段はなく、JavaScriptで開閉していた
HTML
<button id="open">開く</button>
<dialog id="dlg">...</dialog>
JavaScript
open.addEventListener("click", () => {
dlg.showModal();
});


# Page. 36

![Page Image](https://bcdn.docswell.com/page/57GL1X21EL.jpg)

【イマドキ】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>


# Page. 37

![Page Image](https://bcdn.docswell.com/page/4EQYD8PNJP.jpg)

command
popover
専用
値
属性で指定できる値
用途
show-popover popover を開く
hide-popover popover を閉じる
toggle-popover popover をトグル
command
<dialog>
値
専用
用途
show-modal
dialog をモーダル表示
close
dialog を閉じる
request-close dialog に閉じる要求を送る
command


# Page. 38

![Page Image](https://bcdn.docswell.com/page/KJ4WZ2Y371.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/LE1YRM6Z7G.jpg)

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]


# Page. 40

![Page Image](https://bcdn.docswell.com/page/GEWG13W6J2.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/47ZLPV5RJ3.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/YJ6WM591JV.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/GJ5MZYNLJ4.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/LE3W952DE5.jpg)

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>


# Page. 45

![Page Image](https://bcdn.docswell.com/page/8EDKGDZ27G.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/V7PK3XDLJ8.jpg)

2列の行列を作り、子を配置
CSS
タイトルの長さが違っても、
サムネ・日付・タイトル・ボタンの行位置が揃う
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
}


# Page. 47

![Page Image](https://bcdn.docswell.com/page/2JVV4L16JQ.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/5EGL1X22JL.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/4JQYD8P97P.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/K74WZ2XRE1.jpg)

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


# Page. 51

![Page Image](https://bcdn.docswell.com/page/LJ1YRMNVEG.jpg)

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


# Page. 52

![Page Image](https://bcdn.docswell.com/page/GJWG134372.jpg)

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