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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
斉藤賢悟
September 22, 2025
Programming
1
130
先進的なCSS関数で実現する動的スタイリング
フロントエンドカンファレンス東京2025登壇資料
斉藤賢悟
September 22, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
440
Architectural Extensions
denyspoltorak
0
270
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
110
.NET Conf 2025 の興味のあるセッ ションを復習した / dotnet conf 2025 quick recap for backend engineer
tomohisa
0
130
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
230
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
290
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
440
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
180
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
510
Fragmented Architectures
denyspoltorak
0
140
AgentCoreとHuman in the Loop
har1101
5
210
CSC307 Lecture 03
javiergs
PRO
1
490
Featured
See All Featured
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.1k
4 Signs Your Business is Dying
shpigford
187
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
120
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
170
Optimizing for Happiness
mojombo
379
71k
Designing Experiences People Love
moore
144
24k
Code Reviewing Like a Champion
maltzj
527
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2k
Six Lessons from altMBA
skipperchong
29
4.1k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
62
The Curse of the Amulet
leimatthew05
1
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関数使わなくても実装できる 知らない技術を触ってみよう