先進的なCSS関数で実現する動的スタイリング

先進的な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関数使わなくても実装できる知らない技術を触ってみよう

先進的なCSS関数で実現する動的スタイリング

先進的なCSS関数で実現する動的スタイリング

斉藤賢悟

Other Decks in Programming

Featured

Transcript