Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
先進的なCSS関数で実現する動的スタイリング
Search
斉藤賢悟
September 22, 2025
Programming
1
120
先進的なCSS関数で実現する動的スタイリング
フロントエンドカンファレンス東京2025登壇資料
斉藤賢悟
September 22, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
1
200
Querying Design System デザインシステムの意思決定を支える構造検索
ikumatadokoro
1
1.2k
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
bicstone
1
780
Level up your Gemini CLI - D&D Style!
palladius
1
150
アーキテクチャと考える迷子にならない開発者テスト
irof
9
3.4k
connect-python: convenient protobuf RPC for Python
anuraaga
0
340
[SF Ruby Conf 2025] Rails X
palkan
0
400
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
ttskch
3
670
Google Antigravity and Vibe Coding: Agentic Development Guide
mickey_kubo
2
120
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 1
philipschwarz
PRO
0
120
Micro Frontendsで築いた 共通基盤と運用の試行錯誤 / Building a Shared Platform with Micro Frontends: Operational Learnings
kyntk
1
1.9k
俺流レスポンシブコーディング 2025
tak_dcxi
13
6.7k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Designing for Performance
lara
610
69k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
Why Our Code Smells
bkeepers
PRO
340
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Music & Morning Musume
bryan
46
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Designing Experiences People Love
moore
142
24k
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関数使わなくても実装できる 知らない技術を触ってみよう