Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
先進的なCSS関数で実現する動的スタイリング
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
斉藤賢悟
September 22, 2025
Programming
140
1
Share
先進的なCSS関数で実現する動的スタイリング
フロントエンドカンファレンス東京2025登壇資料
斉藤賢悟
September 22, 2025
Other Decks in Programming
See All in Programming
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
shoheimitani
4
590
実践CRDT
tamadeveloper
0
410
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
550
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
mackey0225
3
130
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
seike460
PRO
2
220
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
kentaroutakeda
5
2.5k
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
m3m0r7
PRO
0
370
PDI: Como Alavancar Sua Carreira e Seu Negócio
marcelgsantos
0
110
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
190
How Swift's Type System Guides AI Agents
koher
0
190
Nuxt Server Components
wattanx
0
260
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
serradura
0
290
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
100
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
520
AI: The stuff that nobody shows you
jnunemaker
PRO
5
530
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.1k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
180
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
250
Designing for Timeless Needs
cassininazir
0
190
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
150
Testing 201, or: Great Expectations
jmmastey
46
8.1k
Transcript
先進的なCSS関数で実現する 動的スタイリング 🗂kengoー.zsh - 80x32 × ー フロントエンドカンファレンス東京2025 斉藤賢悟
氏名:斉藤賢悟 学校:北海道情報大学 経営情報学部 4年 - フロントエンドカンファレンス北海道 2024,2025 コアスタッフ - 松尾研発スタートアップARCRA Web系、AI系 自己紹介 🗂kengoー.zsh
- 80x32 × ー X: kengo20_03
最近のトレンド 🗂kengoー.zsh - 80x32 × ー 生成AI LLM ばっかり
今回のテーマ「CSS関数」 🗂kengoー.zsh - 80x32 × ー
if() 🗂kengoー.zsh - 80x32 × ー
if() 🗂kengoー.zsh - 80x32 × ー 値の中で条件分岐ができる関数 条件はmedia()/supports()/style()の3タイプ
media() supports() style() 🗂kengoー.zsh - 80x32 × ー メディアクエリと同様の判断を行います
media() supports() style() 🗂kengoー.zsh - 80x32 × ー 例)画面が広い時だけ余白を増やす
media() supports() style() 🗂kengoー.zsh - 80x32 × ー 指定したCSSをブラウザがサポートしているか否か を判断します
media() supports() style() 🗂kengoー.zsh - 80x32 × ー 例)高度な色空間が使えるならOKLCH
if() なら1つの宣言にまとめれる 🗂kengoー.zsh - 80x32 × ー
それなら@supportsや@mediaで いいのでは🤔 🗂kengoー.zsh - 80x32 × ー
media() supports() style() 🗂kengoー.zsh - 80x32 × ー その要素の状態や属性を見て、値を切り替えます
media() supports() style() 🗂kengoー.zsh - 80x32 × ー 例:状態変数だけで色を切替
progress() / scroll() 🗂kengoー.zsh - 80x32 × ー
progress() 🗂kengoー.zsh - 80x32 × ー ある値が「開始→終了」のどの辺りかを 0〜1 で返 す関数
progress(<現在値>, <開始値>, <終了値>)
progress() 🗂kengoー.zsh - 80x32 × ー 例)
scroll() 🗂kengoー.zsh - 80x32 × ー スクロール量をアニメーションの時間に変換
ページ上部のプログレスバー progress() × scroll(root) 🗂kengoー.zsh - 80x32 × ー
Chrome140 9/3にリリース 🗂kengoー.zsh - 80x32 × ー
calc()がアップデート 🗂kengoー.zsh - 80x32 × ー
calc()とは 🗂kengoー.zsh - 80x32 × ー CSS上で四則演算を行うことができる
今までは 🗂kengoー.zsh - 80x32 × ー 異なる単位同士の計算は、加算と減算のみ
Chrome 140~ 🗂kengoー.zsh - 80x32 × ー 乗算や除算でも異なる単位同士の型付き計算が可能に
実例 🗂kengoー.zsh - 80x32 × ー
ビューポート幅でアニメ速度をスケール 🗂kengoー.zsh - 80x32 × ー
実例 🗂kengoー.zsh - 80x32 × ー
最後に 🗂kengoー.zsh - 80x32 × ー
まとめ 🗂kengoー.zsh - 80x32 × ー ぶっちゃけCSS関数使わなくても実装できる 知らない技術を触ってみよう